跨域 has been blocked by CORS policy

作者：木子云舒
时间：2021年11月19日14:14:02

背景：
之前也会遇到跨域的问题，但是之前一般是前后端自己写，所有很快就解决了。这次遇到跨域，设置了一些参数，但是不生效。也没有搞清楚，究竟跨域是什么，什么情况会出现跨域，怎么验证是否已解决跨域，底层究竟是前端，服务器，浏览器哪一个环节出现了问题。
通过多次试错，加上和几个同事朋友的沟通后，大概知道了是哪里的问题。
所以说搞懂原理比其他都重要，这样才能定位问题，才知道是否解决了。

总结：
跨域，全称跨源资源共享（CORS）。一般是浏览器设置的安全策略。
当浏览器中的本系统访问其他系统的资源的时候会出现跨域的问题。

何为跨域？
Url的一般格式：
协议 + 域名（子域名 + 主域名） + 端口号 + 资源地址

只要协议，子域名，主域名，端口号这四项组成部分中有一项不同，就可以认为是不同的域，不同的域之间互相访问资源，就被称之为跨域。

----------------正确设置-----------------
// 跨域，访问源控制
response.setHeader(“Access-Control-Allow-Origin”, “*”);

---------------------------分割线-------------------------
一般会报错如下：

XXXXX（请求的跨域url）has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested rource.

上面的错误信息说了几个信息：
①请求来源是origin xxxxx
②被cors 政策拦截了
③响应头中没有’Access-Control-Allow-Origin’ 头部信息

这几个信息很关键。
---------------------------分割线-------------------------

我之前以为跨域是发生在请求的时候，所以我认为跨域应该是前端解决，因为他发的请求嘛。肯定还没有到我后端，应该他在请求头中设置 ‘Access-Control-Allow-Origin’。后来发现这是错误的，应该是响应头中设置。
这也是验证是否设置了允许跨域请求的重点。之前的响应中是没有 'Access-Control-Allow-Origin’信息的。

*****所以应该在响应头中设置 “Access-Control-Allow-Origin”：”*“

******所以跨域可以通过后端解决，前端完全不用管。

下面我们整理一下跨域请求的流程：

前端请求的时候分为简单请求和复杂请求，简单请求是不会有跨域问题的。

css,js,

发起一个复杂请求的时候，会先发送请求到接口去 “域检”，这个概念很关键。并且域检是采用OPTION请求，所以要允许OPTION请求。
所谓的跨域检，是正式发起请求前先去判断是否允许跨域。
之后的请求就不会进行跨域检了。

这里也说明了及时被拦截不允许跨域，那么也是请求了接口的，只是还没有执行具体的业务逻辑。

所以设置允许跨域要在第一行设置。
或者采用全局拦截器进行设置。

我的项目中采用的Jfinal 框架，一般我们可以写在具体controller方法的第一行，但是我这个请求是采用hander处理的，那么也必须要写在第一行。

同时，我发现网上说的jfinal添加全局拦截器，我测试的时候没有生效。

其他：

spring boot 跨域解决办法
1.方法或controller上 使用@CrossOrigin注解
2.全局跨域设置
3.filter
可参考：https://www.cnblogs.com/zhaosq/p/11410682.html

听说是官方文档：
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS
后续进行研究后补充。
文档能从官方获取最好从官方获取，因为网络上的博客不一定适合的情况。

地点：成都天府软件园
仅此纪念多年忘记的博客。