1. 跨域
1.1 什么是跨域
跨域,即跨站HTTP请求(Cross-site HTTP request),指发起请求的资源所在域不同于请求指向资源所在域的HTTP请求。
这是浏览器对JavaScript的同源策略的限制,例如a.com下面的js不能调用b.com中的js、对象或数据(因为a.com和b.com是不同的域)。对于http://www.a.com/a.js访问其它URL,更详细的说明如下表所示:
URL | 说明 | 是否允许通信 |
---|---|---|
http://www.a.com/b.js | 同一域名下 | 允许 |
http://www.a.com/script/b.js | 同一域名下不同文件夹 | 允许 |
http://www.a.com:8000/b.js | 同一域名,不同端口 | 不允许 |
https://www.a.com/b.js | 同一域名,不同协议 | 不允许 |
http://70.32.92.74/b.js | 域名和域名对应ip | 不允许 |
http://script.a.com/b.js | 主域相同,子域不同 | 不允许 |
http://a.com/b.js | 同一域名,不同二级域名(同上) | 不允许 |
http://www.b.com/b.js | 不同域名 | 不允许 |
同域的概念又是什么呢?
简单的解释就是具有相同的域名(a.com)、端口(8080)和协议(http)。同源策略:请求的URL地址,必须与浏览器上的URL地址处于同域。
比如:本地上的域名是a.com,请求b.com的数据,这个时候在浏览器上会报错,这个就是同源策略的保护,如果浏览器对JavaScript没有同源策略的保护,那么一些重要的机密网站将会很危险。
1.2 跨域的应用情景
当使用前后端分离,后端主导的开发方式进行前后端协作开发时,常常有如下情景:
- 后端开发完毕在服务器上进行部署并给前端API文档
- 前端在本地进行开发并向远程服务器上部署的后端发送请求
在这种开发过程中,如果前端想要一边开发一边测试接口,就需要使用跨域的方式。
2. SpringMVC跨域问题
2.1 通过注解方式
如果Spring版本为4.2+,则可以在Controller类或其方法上加@CrossOrigin
注解,来使之支持跨域:
@CrossOrigin(origins = "*", maxAge = 3600)
@RestController
@RequestMapping("/User")
public class UserController {
// other code
}
- 1
- 2
- 3
- 4
- 5
- 6
其中origins
为@CrossOrigin
的默认参数,即跨域来源,*
表示任何来源,也可以是其它域名。比如如下形式:
@CrossOrigin("http://localhost:4200")
@CrossOrigin(origins={"http://localhost:4200", "http://localhost:4242"})
@CrossOrigin(origins="http://localhost:4200",maxAge=3600)
- 1
- 2
- 3
该注解用于方法上时写法相同,SpringMVC处理时会对类和方法上的标签进行合并。
2.2 通过配置文件
注解方式可以实现细粒度的跨域控制,而通过配置文件可以实现全局的跨域,在springmvc-config.xml
中添加如下配置:
<mvc:cors>
<mvc:mapping path="/**" />
</mvc:cors>
- 1
- 2
- 3
或者做更复杂的配置:
<mvc:cors>
<mvc:mapping path="/api/**"
allowed-origins="http://domain1.com, http://domain2.com"
allowed-methods="GET, PUT"
allowed-headers="header1, header2, header3"
exposed-headers="header1, header2" allow-credentials="false"
max-age="123" />
<mvc:mapping path="/resources/**"
allowed-origins="http://domain1.com" />
</mvc:cors>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
3. 参考资料
--------------------- 作者:widiot8023 来源:CSDN 原文:https://blog.csdn.net/White_Idiot/article/details/80657796?utm_source=copy 版权声明:本文为博主原创文章,转载请附上博文链接!