跨域 has been blocked by CORS policy

2年前 (2022) 程序员胖胖胖虎阿
103 0 0

作者:木子云舒
时间: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.

跨域 has been blocked by CORS policy

上面的错误信息说了几个信息:
①请求来源是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处理的,那么也必须要写在第一行。
跨域 has been blocked by CORS policy

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

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

版权声明:程序员胖胖胖虎阿 发表于 2022年9月6日 下午6:00。
转载请注明:跨域 has been blocked by CORS policy | 胖虎的工具箱-编程导航

相关文章

暂无评论

暂无评论...