'Access-Control-Allow-Origin' heade is present on the requested 跨域问题 解决
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6e84a4e5d5ce74a7952aecc31b8ead26.png#pic_center)
1、解决问题前先确定是不是跨域
遇到这个问题首先要明确一点,就是你是不是真的跨域,因为在请求的过程中,前后端一些其它的问题,即使不是跨域,浏览器Console中也会报同样的错误,让你误以为是跨域。所以,在解决这个问题之前你先确定是不是真的跨域。
2、什么是跨域
跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制。
这里说明一下,无法跨域是浏览器对于用户安全的考虑,如果自己写个没有同源策略的浏览器,完全不用考虑跨域问题了。是浏览器的锅,对。
同源策略限制了一下行为:
Cookie、LocalStorage 和 IndexDB 无法读取
DOM 和 JS 对象无法获取
Ajax请求发送不出去
3、为什么会跨域
跨域的原因是因为浏览器的同源策略导致的,当我们的前端工程部署的地址和后端的地址不同时,就会发生跨域。
前端发起的请求会带上一个请求头:Access-Control-Allow-Origin: http://www-dev.aitscs.enjoyor.net 冒号后面的是请求端的地址;
同时后端返回消息,同时会带上同样的返回头,但是带的是自己后端服务的地址,浏览器接收到之后一对比发现不对啊,你们不一样,为了安全起见,不能让你们见面!所以就报错了。
4、解决方法
之前也在网上找,说在后端加上过滤器设置请求头为*
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Origin", "*");
但是这样还是不行,浏览器会说不允许将这个请求头设置为*
于是我想着把request的请求头拿出来,给resquest
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Origin", request.getHeader("origin"));
结果真的可以!
也可以通过本地配置nginx,再nginx中这只请求头,其实是一样的,一般服务放在服务器上的时候,都是会在nginx上配置请求头的。
最后附上我的完整代码
@WebFilter(urlPatterns = "/*", filterName = "crosFilter")
public class CORSFilter implements Filter {
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest) req;
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Origin", request.getHeader("origin"));
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.addHeader("Access-Control-Allow-Headers"," Access-Control-Allow-Headers,Token,Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers");
chain.doFilter(req, res);
}
public void init(FilterConfig filterConfig) {
}
public void destroy() {
}
}