Chrome 跨域问题CORS 分析

先叠个甲,有错误,望沟通指正!

文章目录

  • 1.什么是跨域报错
  • 2.为什么postman可以,浏览器访问就不行?根本原因是什么?
    • 2.1浏览器是依据什么来报错跨域的?
  • 3.常规解决方案的分析
    • 方案1.通过代理解决
    • 方案2.被请求的B域的服务端开启Access-Control-Allow-Origin返回头的支持
    • 方案3.通过设置浏览器关闭同源策略来实现访问互通
  • 4.对比3种方案

1.什么是跨域报错

has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

类似上面的报错 ,就是出现了跨域限制访问问题

2.为什么postman可以,浏览器访问就不行?根本原因是什么?

同源策略(Same-Origin Policy),这个是浏览器的一个策略.也就是在A的域 去请求B域的资源,是不被浏览器允许的
这一种存在于浏览器上的安全策略,所以你用edge还是chrome,都会出现这个问题.而使用postman则没有.
抛出这个报错的根源在于浏览器

2.1浏览器是依据什么来报错跨域的?

并不是只通过IP来判断是否跨域报错的.
这里还涉及到一个参数就是Access-Control-Allow-Origin.如果请求B域的时候,返回的header带有这个参数.那么也是被浏览器允许的(可以通过同源策略的安全限制)

B域的服务,返回头中是否带有Access-Control-Allow-Origin,取决于B域的后台服务的代码中,是否开启了相关功能.
具体JAVA GOLANG PYTHON C#,如何开启Access-Control-Allow-Origin ,可以全网搜一下 ,不赘述了

也就是B域的服务端,开启了Access-Control-Allow-Origin,那么所有浏览器都可以跨域访问呢这个资源

3.常规解决方案的分析

方案1.通过代理解决

也就是最常见到的,在使用vue-admin-templete等前端分离项目开发时,咱们在vue.config.js里面配置的proxy
类似这样

devServer: {port: port,   //服务器 是A域open: true,overlay: {warnings: false,errors: true},before: require('./mock/mock-server.js'),proxy: {'/dev-api/vat':{target:"http://B域:8080",changeOrigin: true,}}},

结论: 核心原理也就是转发. ,对于浏览器来说,访问/dev-api/vat的时候,实际上确实是访问服务器的/dev-api/vat资源.
但是服务器在后台启动了一个代理,将/dev-api/vat资源转发给了B域.
因为是代理服务发起给B域的,所以没有同源策略的限制.代理服务自然能够成功收到B域的返回.
接下来代理服务将结果返回给浏览器(这里对于浏览器来说,代理服务和A域 是同源的 所以没有报错)

方案2.被请求的B域的服务端开启Access-Control-Allow-Origin返回头的支持

具体JAVA GOLANG PYTHON C#,如何开启Access-Control-Allow-Origin ,可以全网搜一下 ,不赘述了
也就是B域的服务端,开启了Access-Control-Allow-Origin,那么多有浏览器都可以跨域访问呢这个资源

方案3.通过设置浏览器关闭同源策略来实现访问互通

以chrome为例 ,在快捷方式–属性–目标这里,追加参数 --disable-web-security --user-data-dir=用户数据目录 即可

例如
"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir=C:\temp

此时 打开chrome将不再受跨域的束缚,但是会提示你安全性降低

4.对比3种方案

方案1-代理方案2-服务端代码放开方案3-浏览器关闭同源策略
安全性相对 高相对 中相对 低
方便性相对 中相对 中相对 高
使用场景开发调试
多个服务继承部署
开发调试
多个服务继承部署
生产多环境调用
无所不能
调用区别前端所在的服务器去调用B域可以在浏览器访问端直接调用B域随便搞

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/747070.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【python】列表篇

文章目录 列表的索引与切片列表删除列表增加调整类型后转换为列表count和index函数 列表的索引与切片 # List [P, y, t, h, o, n] List list(map(str,Python)) print(List[3]) print(List[-4:])列表删除 Python 列表(list)中常用的删除元素的函数和方…

python前端开发

前端开发 快速网站开发 from flask import Flask appFlask(__name__) #创建网址/show/info 和函数index的对应关系, #访问网站,执行index()函数 app.route("/show/info") def index():return "中国联通" if __name__"__main_…

Three.js基础入门介绍——Three.js学习七【播放模型动画时模型沿着轨迹移动】

效果描述 在播放导入的模型动画同时,让模型沿着预定路径轨迹移动。例如导入一个会跑步动作的模型,让它沿着一条类似跑道的路径跑步移动。 实现流程 基本流程 1、搭建场景 2、添加模型和播放动画 3、添加路径和模型移动 工程文件 工程文件结构如下图&…

谁用过腾讯云轻量应用服务器2核2G3M配置,支持多少人在线?

腾讯云轻量应用服务器2核4G5M配置一年优惠价165元、252元15个月、三年756元,100%CPU性能,5M带宽下载速度640KB/秒,60GB SSD系统盘,月流量500GB,折合每天16.6GB流量,超出月流量包的流量按照0.8元每GB的价格支…

InheritableThreadLocal和ThreadLocal的区别和使用场景

快人快语,先说结论,InheritableThreadLocal 是 ThreadLocal 的一个子类,它包含ThreadLocal 的所有功能并且扩展了 ThreadLocal 的功能,允许父线程中的 InheritableThreadLocal 变量的值被子线程继承。这意味着,当创建一…

常用芯片学习——TP4057电源管理芯片

TP40578 500mA线性锂离子电池充电器 芯片介绍 TP4057是一款性能优异的单节锂离子电池恒流/恒压线性充电器。TP4057采用S0T23-6封装配合较少的外围原件使其非常适用于便携式产品,并且适合给USB电源以及适配器电源供电。 基于特殊的内部MOSFET架构以及防倒充电路&a…

Python实现一笔画游戏

Python实现一笔画游戏 关于一笔画介绍可参见“HTML5实现一笔画游戏”https://blog.csdn.net/cnds123/article/details/136669088 在Python中,Tkinter是一个广泛使用的标准GUI库,我们将使用它来实现这个游戏。 先给出效果图: 连接线段时&am…

MQL语言实现抽象工厂模式

文章目录 一、定义抽象产品接口二、定义抽象工厂接口三、定义具体产品四、定义具体工厂五、定义工厂客户端六、客户端调用工厂客户端七、抽象工厂模式的结构 一、定义抽象产品接口 //------------------------------------------------------------------ //| participants …

城乡居民基本医疗信息管理系统|基于Springboot的城乡居民基本医疗信息管理系统设计与实现(源码+数据库+文档)

城乡居民基本医疗信息管理系统目录 目录 基于Springboot的城乡居民基本医疗信息管理系统设计与实现 一、前言 二、系统设计 三、系统功能设计 1、病例管理 2、医院资讯信息管理 3、医院资讯类型管理 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选…

微信小程序开发学习笔记《21》uni-app框架-楼层图片跳转

微信小程序开发学习笔记《21》uni-app框架-楼层图片跳转 博主正在学习微信小程序开发,希望记录自己学习过程同时与广大网友共同学习讨论。建议仔细阅读uni-app对应官方文档 一、创建新的分包goods_list 二、将请求到的楼层数据url调整为本地的 可以看到上图是请求…

关于固件的简单解释

我不喜欢等人也不喜欢被别人等——赤砂之蝎 简而言之 固件是什么 固件(Firmware)是一种软件类型,它是嵌入式系统中的一部分,通常存储在设备的非易失性存储器中,如闪存或ROM(只读存储器)。与操作…

蓝桥杯---棋盘(典型的二维差分问题)

题目链接:棋盘 这道题真的是非常典型的二维差分问题了(在我个人看来),题目中的0和1,我们直接让差分数组,偶数就是0,奇数就是1.初始化是0,是白子(偶数)&#x…

libevent中bufferevent事件及常用的API函数

自带buffer的事件-bufferevent bufferevent实际上也是一个event,只不过比普通的event高级,他的内部有两个缓冲区,以及一个文件描述符(网络套接字)。一个网络套接字有读写两个缓冲区,bufferevent同样也带有…

探索仿函数(Functor):C++中的灵活函数对象

文章目录 一、仿函数定义及使用二、仿函数与函数指针的区别三、仿函数与算法的关系四、仿函数的实践用例 在C编程中,我们经常需要对数据进行排序、筛选或者其他操作。为了实现这些功能,C标准库提供了许多通用的算法和容器,而其中一个重要的概…

思科防火墙如何配置静态NAT

环境: 思科防火墙ASA5555 Cisco Adaptive Security Appliance Software Version 9.4(2)6 Device Manager Version 7.5(2)153 问题描述: 思科防火墙如何配置静态NAT 解决方案: 1.做之前要先查一下有没有端口被占用,要和业务确…

nut-ui组件库icon中使用阿里图标

1.需求 基本每个移动端组件库都有组件 icon组件 图标组件、 但是很多组件库中并找不到我们需要的图标 这时候 大家有可能会找图标库 最大众的就是iconfont的图标了 2.使用 有很多方式去使用这个东西 比如将再限链接中的css引入 在使用 直接下载图标 symbol 方式 等....…

【NR 定位】3GPP NR Positioning 5G定位标准解读(十三)-DL-AoD定位

前言 3GPP NR Positioning 5G定位标准:3GPP TS 38.305 V18 3GPP 标准网址:Directory Listing /ftp/ 【NR 定位】3GPP NR Positioning 5G定位标准解读(一)-CSDN博客 【NR 定位】3GPP NR Positioning 5G定位标准解读(…

buuctf warmup 超详细

目录 1.代码审计&#xff1a; 2.逻辑分析 3.总结分析 4.分析记录 5.疑点解答 1.代码审计&#xff1a; <?phphighlight_file(__FILE__);class emmm //定义了一个类{public static function checkFile(&$page) 类里面又申明创建…

移动通信网络AT指令

PLMN 移动通信网络PLMN = MCC + MNC,PLMN由MCC移动国家码和MNC移动网络码组成,例如:中国移动GSM的PLMN为:46000(MCC:460, MNC:00)中国联通GSM的PLMN国家码MCC为460,网络码MNC为01: 46001中国大陆相关的移动网络码:中国移动系统使用00、02、04、07,中国联通GSM系统…

题目 2656: 蓝桥杯2022年第十三届省赛真题-刷题统计

时间限制: 3s 内存限制: 320MB 提交: 31968 解决: 5255 题目描述 小明决定从下周一开始努力刷题准备蓝桥杯竞赛。他计划周一至周五每天做 a 道题目&#xff0c;周六和周日每天做 b 道题目。请你帮小明计算&#xff0c;按照计划他将在第几天实现做题数大于等于 n 题&#xff1…