IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 网络协议 -> 跨域 has been blocked by CORS policy -> 正文阅读

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

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

  网络协议 最新文章
使用Easyswoole 搭建简单的Websoket服务
常见的数据通信方式有哪些?
Openssl 1024bit RSA算法---公私钥获取和处
HTTPS协议的密钥交换流程
《小白WEB安全入门》03. 漏洞篇
HttpRunner4.x 安装与使用
2021-07-04
手写RPC学习笔记
K8S高可用版本部署
mySQL计算IP地址范围
上一篇文章      下一篇文章      查看所有文章
加:2021-11-20 18:45:47  更:2021-11-20 18:47:58 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/26 7:51:13-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码