跨域 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
后续进行研究后补充。
文档能从官方获取最好从官方获取，因为网络上的博客不一定适合的情况。

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

跨域 has been blocked by CORS policy相关推荐

解决浏览器跨域加载本地文件报错 Access to script at ‘xxx‘ from origin ‘null‘ has been blocked by CORS policy
报错: Failed to load resource: net::ERR_FILE_NOT_FOUND Access to script at 'xxx' from origin 'null' ha ...
前后端分离跨域问题Access to XMLHttpRequest at ‘http://localhos...has been blocked by CORS policy: No ‘Access-
完整报错如下: Access to XMLHttpRequest at 'http://localhost:8081/login' from origin 'http://localhost:8084 ...
阿里云OSS跨域报错：Access to XMLHttpRequest at ‘...‘ ... blocked by CORS policy: No ‘Access-Control-Allow
错误标签:阿里云OSS, 跨域请求, No 'Access-Control-Allow-Origin' 浏览器具体报错内容: Access to XMLHttpRequest at 'https:// ...
关于blocked by CORS policy的跨域问题
1.现象描述 Access to XMLHttpRequest at 'http://127.0.0.1:7001/api/user/list' from origin 'http://localho ...
ajax跨域请求问题：Access to XMLHttpRequest at……has been blocked by CORS policy: Cross origin requests
背景:本地代码调试时,加载本地资源正常,jquery的AJAX请求服务端资源报错. Access to XMLHttpRequest at '***** ' from origin 'null' ha ...
跨域问题has been blocked by CORS policy: No Access-Control-Allow-Origin和 It does not have HTTP ok status
SpringBoot vue项目发布到服务器出现跨域问题has been blocked by CORS policy: No Access-Control-Allow-Origin 和 Respon ...
用 cors 解决：Access to XMLHttpRequest at ‘http://localhost:5500/get‘ from blocked by CORS policy 等的跨域问题
1.问题描述: 其一.在从服务器访问信息的时候,突然报错,报错的信息为:Access to XMLHttpRequest at 'http://localhost:5500/get' from ori ...
解决升级Chrome浏览器之后出现跨域错误：Access to xxx has been blocked by CORS policy: XXXX
一.错误产生的背景 Google Chrome浏览器升级 1.1 Google Chrome漏洞报告,要求升级近日,Google Chrome官方发布Google Chrome远程代码执行漏洞(CV ...
海康视频插件启动过程中出现跨域问题has been blocked by CORS policy
海康视频插件启动过程中出现反复启动控制台报错:has been blocked by CORS policy: The request client is not a secure context ...

跨域 has been blocked by CORS policy

跨域 has been blocked by CORS policy相关推荐

最新文章

热门文章