2025年cors跨域解决方案（cors解决跨域问题）

大家好，我是讯享网，很高兴认识大家。

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <p><strong>场景&#xff1a;</strong></p>

讯享网

业务要求从把系统B嵌入到系统A中，系统A和系统B是完成不同的两个域名，前端同事完成系统嵌入后，从A系统内部调用B系统的接口时候发现跨域错误（CORS error），如下：
在这里插入图片描述
讯享网

什么是跨域？

跨域(Cross Origin)指浏览器不允许当前页面所在的源去请求另一个源的数据，跨域也就是跨源的意思。

什么是同源？

同源策略(SOP Same origin policy)：是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也是最基本的安全功能，如果缺少同源策略，浏览器很容易受到XSS、CSFR等攻击，所谓同源是指“协议+域名+端口”三者相同，必须满足这三个条件，才算做同源。

跨域具体场景举例：

当前页面 url 地址被请求页面 url 地址是否跨域原因https://www.aaa.comhttps://www.aaa.com/index否协议+域名+端口三者相同https://www.aaa.comhttp://www.aaa.com是协议不同，http、httpshttps://www.aaa.comhttps://www.aaa.com是主域名不同https://www.aaa.comhttps://hy.aaa.com是子域名不同https://www.aaa.com:10000https://www.aaa.com:10010是端口不同

什么原因导致浏览器报跨域错误？

发起ajax请求的那个页面的地址和 ajax接口地址不在同一个域中，直接导致了跨域问题，也就是说跨域问题发生在浏览器。

跨域问题解决方案：

Nginx 反向代理解决跨域

Nginx 反向代理解决跨域，只需要在 nginx 上增加配置文件，即可解决跨域问题，如下：

讯享网

Nginx 增加配置解决跨域问题，只使用一种解决问题即可，不要同时配置多个。

Nginx 知识传送门：

Nginx 故障排查之斜杠(/) –（附 Nginx 常用命令）

服务端解决跨域问题

解决 CORS 跨域问题，就是在服务器端给响应添加头信息，解释如下：

Access-Control-Allow-Origin 允许请求的域
Access-Control-Allow-Methods 允许请求的方法
Access-Control-Allow-Headers 预检请求后，告知发送请求需要有的头部
Access-Control-Allow-Credentials 表示是否允许发送cookie，默认false；
Access-Control-Max-Age 本次预检的有效期，单位：秒；

1、使用过滤器解决跨域问题，注意该方案需要在启动类加注解：@ServletComponentScan({“com.my.study.main.filter”}

2、过滤器解决跨域的另外一种实现方式。

讯享网

2、添加 @Configuration 注解，实现 WebMvcConfigurer 接口，解决跨域问题。

跨域解决方案总结：

推荐使用 Nginx 处理跨域问题，只需要在nginx 上增加配置即可解决问题，而服务端解决跨域问题，或多或少都需要写代码，本着少改代码的原则，强烈建议使用 Nginx 的方式解决跨域问题，不管使用哪种方式解决跨域问题，只需要使用一种即可，不要多种方式叠加使用。

温馨提示：

跨域问题通常是伴随多个系统一起出现了，也就是出现了跨系统调用，可能会出现跨域问题，这个时候要主要多个系统的权限认证是否通用，如果权限认证不通用，要优先解决权限认证的问题，否则也是提示跨域问题，浏览器端常见错误如下：
在这里插入图片描述

什么是预检（OPTIONS）请求？

浏览器使用 OPTIONS 方法发起一个预检请求（preflight request），来感知服务端是否允许该跨域请求，服务器确认允许之后，才发起实际的 HTTP 请求，OPTIONS 请求没有附带请求数据，响应体也为空，简单来说就是一种探测，这就是预检请求，是浏览器的一种保护机制。

预检（OPTIONS）请求的作用？

跨域场景中使用了预检请求，跨域请求失败产生错误，代码层无法获知感知错误发生的地方，这时候可以查看浏览器的控制台来查询错误信息。
检测服务器支持的请求方法。

什么时候会触发预检（OPTIONS）请求？

非简单请求时候会触发预检请求。

简单请求与非简单请求：

简单请求：

请求方法是 GET、HEAD、POST 中的一种。
HTTP的头信息只能是 Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type 中的某几个，不能超出这个范围。
Content-Type 的值只能是 textplain、multipart/form-data、application/x-www-form-urlencoded 中的一种。
请求中没有使用 XMLHttpRequestUpload 对象。
请求中没有使用 ReadableStream 对象。

如有错误的地方欢迎指出纠正。

2025年cors跨域解决方案（cors解决跨域问题）

相关推荐