No 'Access-Control-Allow-Origin' header is present on the requested resource.

骑猪看日落 2021-12-12 14:45 102阅读 0赞

## 报错： ##

![20190712112430828.png][]

## 造成原因： ##

不同域名之间互相访问造成请求资源跨域。

## 解决方法： ##

java 添加一个过滤器

@Component
    public class CorsFilter implements Filter {
    	@Override
    	public void init(FilterConfig filterConfig) throws ServletException {
    
    	}
    
    	@Override
    	public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
    		HttpServletResponse response = (HttpServletResponse) servletResponse;
    		HttpServletRequest request = (HttpServletRequest)servletRequest;
    
    		String origin = request.getHeader("Origin");
    		response.setHeader("Access-Control-Allow-Origin", origin);
    		response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE");
    		response.setHeader("Access-Control-Max-Age", "3600");
            // 自定义的请求头也要添加
    		response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization");
    		response.setHeader("Access-Control-Allow-Credentials", "true");
    		String method = request.getMethod();
    		if(method.equalsIgnoreCase("OPTIONS")){
    			servletResponse.getOutputStream().write("Success".getBytes("utf-8"));
    		}else{
    			filterChain.doFilter(servletRequest, servletResponse);
    		}
    	}
    
    	@Override
    	public void destroy() {
    
    	}
    }

这样配置之后，不会出现跨域问题，因为请求不安全 ，系统每次都会发送一个OPTIONS 的预检测，浏览器上会看到请求有2次，一次OPTION，一次是真正请求。

OPTIONS:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NDIzMTA1_size_16_color_FFFFFF_t_70][]

由于我们过滤器处理了OPTIONS 请求，返回200，浏览器才会调用真正的请求。

GET:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NDIzMTA1_size_16_color_FFFFFF_t_70 1][]

因为OPTIONS 的问题导致保存数据的时候出现问题，

1.  application/x-www-form-urlencoded、multipart/form-data、text/plain 
2.  application/json;charset=UTF-8

如果是json格式的话过滤器中需要允许Content-Type

response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization,Blade-Auth,uid,Content-Type");

参考：

[跨域处理][Link 1]

[OPTIONS请求][OPTIONS]

[20190712112430828.png]: /images/20211210/c9c2acb4a5a4497982881b1cda23d72d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NDIzMTA1_size_16_color_FFFFFF_t_70]: /images/20211210/e6721d4b197c4e0eadf65458dfb33b72.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NDIzMTA1_size_16_color_FFFFFF_t_70 1]: /images/20211210/ed8ebcf788aa457da21b01e2036a33e7.png
[Link 1]: https://blog.csdn.net/qq_39403545/article/details/82116121
[OPTIONS]: https://www.jianshu.com/p/744f43c9386b

No 'Access-Control-Allow-Origin' header is present on the requested resource.

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关完美解决：No ‘Access-Control-Allow-Origin‘ header is present on the requested resource

相关 C#WebService 出现No 'Access-Control-Allow-Origin' header is present on the requested resource

相关 No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.

相关 No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.

相关【ASP.NET】 No 'Access-Control-Allow-Origin' header is present on the requested resource.

相关 Post request is No 'Access-Control-Allow-Origin' header is present on the requested resource跨域问题解决

相关 Spring Cloud Zuul No 'Access-Control-Allow-Origin' header is present on the requested resource.

相关 No 'Access-Control-Allow-Origin' header is present on the requested resource.

相关跨域问题 No 'Access-Control-Allow-Origin' header is present on the requested resource

相关 CORS policy: header is present on the requested