对于前后端分离的项目来说，如果前端项目与后端项目部署在两个不同的域下，那么势必会引起跨域问题的出现。
什么是跨域？
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。简单来说就是不同域名之间相互访问
同源策略:请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.
例如：
http://www.a.com 要访问 http://www.b.com 这样域名不同，属于跨域
http://www.a.com:8081/index.html调用http://www.a.com:8080的接口 这样端口号不同 也属于跨域
http://www.a.com:访问https://www.a.com 这样也是属于跨域 协议不一样
所以在以前前后端不分离的开发模式中，从来不用关注这个问题，因为所有的请求都是在同一个域内
综合了网上解决跨域的方式目前有两种
1.使用JSONP
不过我不太推荐使用，JSONP只支持GET请求，不管是对于前端还是后端来说，写法与我们平常的ajax写法不同，同样后端也需要作出相应的更改。
JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。
2.通过cors协议解决跨域问题
CORS支持所有类型的HTTP请求。
这个也是我非常推荐大家使用的方法
下面我来说下项目中遇到的问题
前端：vue.js
后端：springboot
前端请求接口时，报错信息如下
Origin 'http://localhost:8080' is therefore not allowed access.
The credentials mode of an XMLHttpRequest is controlled by the withCredentials attribute
解决方法：
前端请求开启 withCredentials: true
后台接口也需要对应的将 Access-Control-Allow-Credentials 设为 true。
前端携带token传后端时报错
Request header field token is not allowed by
Access-Control-Allow-Headers in preflight response.
这是由于请求头内并没有这个名叫token的请求头字段
默认情况下，只有六种 simple response headers （简单响应首部）可以暴露给外部：Cache-Control Content-Language Content-Type Expires Last-Modified Pragma
如果想要让客户端可以访问到其他的首部信息，可以将它们在Access-Control-Expose-Headers 里面列出来。
所以解决方法是：
在Access-Control-Allow-Headers添加自定义的请求头字段Token
如果还有其他请求头字段需要使用，也是需要在Access-Control-Allow-Headers添加，不然服务器是不允许的
后面还有一个问题：
Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:8080' is therefore not allowed access.
The response had HTTP status code 503.
这个是请求头返回服务不可用
解决方式：
我看了下代码原来是我写了两个跨域过滤一个是用写过滤器Filter，一个是继承webmvcconfigureradapter然后我注释了其中一个就可以了，我想应该是两个跨域处理器冲突了
拓展
现在开发客户端都是发非简单请求
非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。也就是通过json数据交互
非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。
流程
浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。
"预检"请求用的请求方法是OPTIONS，表示这个请求是用来询问的。头信息里面，关键字段是Origin，表示请求来自哪个源。
一般不特殊指定源的话都将Access-Control-Allow-Origin设置为*
除了Origin字段，"预检"请求的头信息包括两个特殊字段。
（1）Access-Control-Request-Method
该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法
所使用到的方法也是要在跨域处理器中说明
也就是在Access-Control-Allow-Methods中加入各种请求方法
例如：POST PUT, GET, OPTIONS, DELETE
（2）Access-Control-Request-Headers
该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段
这个上面有说到，项目需要什么额外的请求头字段就添加上去
服务器收到"预检"请求以后，检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，确认允许跨源请求，就可以做出回应。
说了这么
我分享下我的跨域处理的代码（我这里是使用过滤器的写法，也可以使用继承webmvcconfigureradapter的方法）
@Component
public class CorsFilter implements Filter {
/*跨域请求配置*/
@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
HttpServletRequest reqs = (HttpServletRequest) req;
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "5000");
response.setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,Authorization,Token");
chain.doFilter(req, res);
}
@Override
public void init(FilterConfig filterConfig) {}
@Override
public void destroy() {}
}
继承webmvcconfigureradapter的方法
@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").allowedOrigins("*").allowedMethods("GET", "POST", "OPTIONS", "PUT")
.allowedHeaders("Content-Type", "X-Requested-With", "accept", "Origin", "Access-Control-Request-Method",
"Access-Control-Request-Headers")
.exposedHeaders("Access-Control-Allow-Origin", "Access-Control-Allow-Credentials")
.allowCredentials(true).maxAge(3600);
}
}
注:以上写法二选一即可，两个都写估计还是会冲突，两者作用一样只是写法不同
网友评论