跨域

同源策略

浏览器采用了同源策略，只有位于相同域中的其它页面才访问这些数据。

1、协议：协议必须匹配。如果在以httpd起始的页面上保存了数据，那么此数据就无法通过https来访问。

2、子域名：子域名必须匹配。例如maps.google.com无法访问www.google.com上存储的数据。

3、域名：域名必须匹配。如例如google不能访问baidu.com上存储的数据。

4、端口号：端口号必须匹配。web服务器可以指定各种端口号。URL中通常不指定端口号，默认使用80端口。

跨来源资源共享

与同源策略相反的是跨来源资源共享。

跨来源资源共享（CORS），亦译为跨域资源共享，是一份浏览器技术的规范，提供了 Web 服务从不同网域传来沙盒脚本的方法，以避开浏览器的同源策略。

来用跨来源资源共享可以解决同源策略产生的问题。

主要从两个方面来解决：一是服务端，二是客户端。

服务端有servlet jersey spring，分别有不同的解决方案。

servlet在过滤中添加以下代码

1 2 3 4 5 6 7 8 9 10

public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain chain)         throws IOException, ServletException {       HttpServletRequest request = (HttpServletRequest) servletRequest;       // Authorize (allow) all domains to consume the content     ((HttpServletResponse) servletResponse).addHeader("Access-Control-Allow-Origin", "*");     ((HttpServletResponse) servletResponse).addHeader("Access-Control-Allow-Methods","GET, OPTIONS, HEAD, PUT, POST");       }

jersey创建一个过滤器，添加以下代码

1 2 3 4 5 6 7 8 9

public class CorsFilter implements ContainerResponseFilter {       @Override     public void filter(ContainerRequestContext requestContext, ContainerResponseContext responseContext)             throws IOException {         // 注意，添加的头是小写哦         responseContext.getHeaders().add("access-control-allow-origin", " * ");     } }

spring 最简洁，只要在方法上添加注释@CrossOrigin

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

@RestController public class StudentController {           @Autowired     StudentRepository studentRepository;       @CrossOrigin     @PostMapping(value="/students",consumes = "application/json")     public ResponseEntity<Object> createStudent(@RequestBody Student student) {         Student savedStudent = studentRepository.save(student);         URI location = ServletUriComponentsBuilder.fromCurrentRequest().path("/{id}")                 .buildAndExpand(savedStudent.getId()).toUri();         return ResponseEntity.created(location).build();     } }

客户端调用时，添加一个配置参数crossDomain: true

1 2 3 4 5 6 7 8 9 10 11 12 13 14

$obj='{"name":"gt","age":22}';   $.ajax({     cache: false,     crossDomain: true,     url: "http://127.0.0.1:8080/students",     type: "POST",     dataType:"json",     contentType:"application/json",     data:$obj,     success: function(data) {        console.log(data);     } });