跨域
同源策略
浏览器采用了同源策略，只有位于相同域中的其它页面才访问这些数据。
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
|
@RestControllerpublic 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, type: "POST", dataType:"json", contentType:"application/json", data:$obj, success: function(data) { console.log(data); }}); |
