告别烦恼，彻底解决跨域问题的终极指南-chrome的安全进阶之路

一、跨域问题概述

has been blocked by CORS policy:No 'Access-Control-Allow-Origin'

相信这个跨域的问题大家并不陌生。

二、常规解决方案

来看一下常规的解决方案：

常规的解决跨域问题方案主要包括以下几种：

JSONP：通过动态创建<script>标签，将数据以JSONP形式返回到前端页面。由于<script>标签不受同源策略的限制，因此可以实现跨域访问。
CORS（跨域资源共享）：在服务端设置响应头部中的Access-Control-Allow-Origin字段，授权指定的域名进行跨域访问。CORS需要浏览器和服务器双方都支持，且只适用于XMLHttpRequest请求。

CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
config.addAllowedOriginPattern("*");
config.addAllowedHeader("*");
config.addExposedHeader("*");
UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
configSource.registerCorsConfiguration("/**", config);

反向代理：将前端请求先发送到同源的后端服务器，然后由后端服务器转发请求到目标服务器，最后再将结果返回给前端页面。这种方式需要部署额外的服务器进行代理，但能够解决通用性较好的跨域问题。

小结：

可以发现前2种方法，大多部分场景下都已经没效果了，当然第3种还是可以的。

三、一些特殊情况

1、调用localhost服务问题

不过还有很多场景没法使用反向代理。比如页面要调用c++的本地服务，在本地就没法代理了。这种场景在以前好像也是可以正常调用的，不过chrome浏览器在2021升级过一次，也就是在 chrome v94 之后 ,chrome浏览器会有这么个提示：

Access to Css stylesheet at ‘http:xx’ from origin ‘ http://xx‘ has been blocked by CORS policy: The request client is not a secure context and the resource is in more-prevate adddress space local

可以看到“local”也就是调用http://localhost (或 http://127.0.0.0)浏览器出于安全考虑会阻止此请求。当然问题出来了也就会有相应的解决方案。