跨域请求(CORS)要点

Posted 2023-03-09

参考技术A 前端开发的童鞋，应该都有听过跨域请求，但这其中的细节可能还不清楚，比如：
<pre>

跨域请求 - 访问其他域名的资源，随着业务的复杂化及前后端的分离，我们需要经常访问其他域名的资源，因此这里就涉及到跨域访问，下图给出了跨域访问的例子

可能有童鞋就说了，何必这么麻烦，直接允许访问不就行了，也许前期就是这样，于是就出现了CSRF（跨站请求伪造），可以看下图：

因此网站A就必须添加访问限制，即决策是否允许网站B访问

跨域请求针对不同的请求会采用不用的策略，这里罗列如下：

满足以上特征的请求就是Simple request，采用如下工作模式:

PS： Access-Control-Allow-Origin: * 表示允许所有网站方法

除了简单请求外，其他请求访问前需要先发一条预检请求，比如采用OPTIONS，采用如下工作模式:

一般会报如下错误： 已拦截跨源请求：同源策略禁止读取位于 http://127.0.0.1:19110/uptoken 的远程资源。（原因：CORS 头 'Access-Control-Allow-Origin' 不匹配 '1'）

解决方法：检测服务端配置的Access-Control-Allow-Origin，应该包含前端所在服务的域名

一般会报如下错误： 已拦截跨源请求：同源策略禁止读取位于 http://127.0.0.1:19110/uptoken 的远程资源。（原因：来自 CORS 预检通道的 CORS 头 'Access-Control-Allow-Headers' 的令牌 'if-modified-since' 无效）

解决方法：检测服务端配置的Access-Control-Allow-Headers，应该包含前端发送的Access-Control-Request-Headers（可以抓包看前端发送的数据）