跨域问题及解决

1. 跨域问题

1.1 同源策略

是浏览器自带的安全策略,用来阻止从一个域加载另外一个域的资源(js,css,图片排除在外)

1.2 什么叫不同的域

协议|域名|端口三者必须完全一致,才叫同一个域,只有要一个不同就叫不同的域,此时相互之间做资源的调用就会触发同源策略

eg:当前服务器为 http://softeem.com/test1/test2/test3 ,在这个网页中使用ajax访问下列的资源,路径为:

URL	是否跨域(Y:跨域 N:不跨域)
http://softeem.com/test2/test3	N
http://www.softeem.com/test1/test2/test3	Y
https://softeem.com/test1/test2/test3	Y

从 http://127.0.0.1:8080/test 去访问 http://localhost:8080/test 跨域
跨域问题图例

1.3 解决跨域问题

在后端主流的是 CORS (Cross-origin resource sharing):跨域资源共享,支持所有类型HTTP请求跨域访问的问题
还有一种 JSONP 也可以解决,但是有一个限制,只支持GET请求跨域资源访问

1. 全局解决方案

<!-- 跨域解决 -->
<!--
path:允许跨域访问的资源路径
allowed-origins:允许跨域访问指定path的域的列表,默认为*,代表所有域
allowed-methods:允许跨域访问指定path的HTTP方法的列表,默认为*,代表所有方法
max-age:预检请求结果的缓存时间,单位为秒,默认为1800(半小时)
-->
<mvc:cors>
<mvc:mapping path="/rest/*"
allowed-origins="*"
allowed-methods="*"
max-age="3600"/>
</mvc:cors>

2. 局部解决

使用注解, @CrossOrigin 既可以放在类上,也可以放在方法上,遵循 就近原则

@RestController
@RequestMapping("rest")
@CrossOrigin(origins = {"http://localhost:8888"})
public class RestfulController {
@GetMapping("/request")
@CrossOrigin(origins = {"*"})
public String getRequest(){
// return "{\"msg\":\"GET成功\"}";
// return "{'msg':'GET成功'}";
return "GET成功";
}