前后端分离项目解决跨域请求问题需要在配置类中加入代码
/**
* 跨域请求
* @param registry
*/
@Override
public void addCorsMappings(CorsRegistry registry) {
//添加映射路径
registry.addMapping("/**")
// //放行哪些原始域
// .allowedOriginPatterns("*")
//是否发送Cookie信息
.allowCredentials(true)
//放行哪些原始域(请求方式)
.allowedMethods("GET", "POST", "PUT", "DELETE","OPTIONS")
//放行哪些原始域(头部信息)
.allowedHeaders("*")
//暴露哪些头部信息(因为跨域访问默认不能获取全部头部信息)
.exposedHeaders("Header1", "Header2");
}
解决跨域问题的详细步骤如下:
确认是否存在跨域问题:在浏览器控制台查看请求返回值,若报错提示跨域错误,就需要解决跨域问题。
对于不复杂的场景可以使用JSONP。JSONP的实现步骤如下:
(1)客户端定义一个回调函数(callback),并把自己的名称传递到服务器
(2)服务端接收参数并生成特定的Json格式数据,并将函数名作为回调函数传递给前端。
(3)返回给客户端的结果是JSON对象不是JSON字符串,因为JSONP的原理是利用Js脚本跨域加载,所以只支持GET请求。
** 使用CORS(Cross-Origin Resource Sharing,跨源资源共享)**
CORS是当前比较常用的方案之一。其实现步骤主要分为两个方面:后端和前端
后端:
(1)在服务端添加Access-Control-Allow-Origin响应头,例如添加允许所有源的访问:
response.setHeader("Access-Control-Allow-Origin", "*");
也可以指定某一个域名进行跨域访问:
response.setHeader("Access-Control-Allow-Origin", "http://www.baidu.com");
(2)在服务端处理OPTIONS请求, OPTIONS是预请求(Preflight
Request),用于获取Web服务器允许跨源请求所需要的信息(例如响应头、Cookie等),服务端可以设置如下相关参数
:
response.setHeader("Access-Control-Allow-Origin", "*"); // 设置允许的跨域来源
response.setHeader("Access-Control-Allow-Methods", "POST,GET"); // 这里涉及到PUT、DELETE、OPTIONS等请求方式另行进行处理
response.setHeader("Access-Control-Allow-Headers", "Content-Type,Authorization"); // 设置允许请求的头部字段
response.setHeader("Access-Control-Max-Age", "3600");//表示预检请求的结果有效期为3600秒,过期后需要重新发起预检请求。
前端:
(1)在ajax请求中加上请求头部分
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
(2)前端基于XMLHttpRequest对象,向服务端发起请求。
使用代理服务器
使用代理服务器是目前比较常见的局部解决方案。主要原理依然是由服务端来发送http请求,客户端只负责往自己的服务器发送数据。
使用WebSocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP
连接上进行全双工通信的协议。浏览器与服务器之间就可以创建持久性连接,使得信息的实时交换成为可能。
注意:选择不同的解决方案会对代码结构有所要求,如果采用JSONP、CORS或者代理服务器处理跨域,需要把数据请求和处理分离开。如果采用WebSocket解决方案,则WebSocket服务统一处理所有的数据请求并返回数据,前端只负责定义对应的回调函数进行后续处理。