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域 | 随便搞 |
相关文章:
Chrome 跨域问题CORS 分析
先叠个甲,有错误,望沟通指正! 文章目录 1.什么是跨域报错2.为什么postman可以,浏览器访问就不行?根本原因是什么?2.1浏览器是依据什么来报错跨域的? 3.常规解决方案的分析方案1.通过代理解决方案2.被请求的B域的服务端开启Access-Control-Allow-Origin返回头的支持方案3.通…...
GPU性能测试中的张量和矩阵运算
正文共:888 字 7 图,预估阅读时间:1 分钟 前面我们使用PyTorch将Tesla M4跑起来之后(成了!Tesla M4Windows 10AnacondaCUDA 11.8cuDNNPython 3.11),一直有个问题,那就是显存容量的问…...
Linux运维_Bash脚本_编译安装FreeRDP-3.3.0
Linux运维_Bash脚本_编译安装FreeRDP-3.3.0 Bash (Bourne Again Shell) 是一个解释器,负责处理 Unix 系统命令行上的命令。它是由 Brian Fox 编写的免费软件,并于 1989 年发布的免费软件,作为 Sh (Bourne Shell) 的替代品。 您可以在 Linux…...
CMake官方教程4--使用表达式生成器
1. 使用表达式生成器产生警告 CMakeList.txt cmake_minimum_required(VERSION 3.15)project(Tutorial VERSION 1.0)add_library(tutorial_compiler_flags INTERFACE) target_compile_features(tutorial_compiler_flags INTERFACE cxx_std_11)set(gcc_like_cxx "$<COM…...
git for windows
记录,git svn混用,检出代码时出错及解决方案, 执行命令: git svn clone svn_project_url 报错: certificate problem.(R)eject,accept (t)emporarily or accept (p)ermanently 解决: 在弹框中 输入P …...
C++实验 面向对象编程
一、实验目的: 掌握类中静态成员的定义方法,初始化方法,使用方法; 掌握类的友元说明方法,理解友元的使用特点 二、实验内容: 1、编写程序,统计某旅馆住宿客人的总数,要求输入客人…...
VC++ 设置网卡接口MTU大小
在 Windows C/C 之中一共有三种方法可以设置网卡的MTU大小。 方法一: SetIpInterfaceEntry 法 static bool SetInterfaceMtu2(int interface_index, int mtu) noexcept{PIP_ADAPTER_ADDRESSES pAddresses NULL;ULONG ulBufLen 0;GetAdaptersAddresses(AF_UNSPEC…...
dpdk-19.11 对向量指令的使用情况分析
不同向量指令识别关键字 __m128i sse uint64x2_t neon __m256i avx2 __m512i avx512 vector altivec dpdk 向量收发包函数 支持 arm neno 向量收发包函数的 pmd 驱动 bnxt hns3 i40e ixgbe mlx5 virtio 支持 sse 向量收发包函数的 pmd 驱动 axgbe hinic fm10k bnxt i40e …...
使用CIP采集欧姆龙EtherNet/IP从入门到精通
本文将会从以下几个方面介绍 1.CIP是什么 2.EtherNet/IP通信是什么 3.CIP通信报文解析 4.使用CIP常用的方法和功能介绍(UCMM) 5.自己封装了一个类,只要知道标签名称,和数据类型即可读写数据 6.demo展示 1.CIP是什么 CIP通信…...
企业如何高效管理微信里的客户?
对于企业来说,懂得高效管理微信列表的客户是非常重要的一件事,只有把客户管理好了,才能更好地提高客户的满意度和忠诚度,我们的销售业务才能顺利进行。 那么,应该怎样管理才能算是高效管理呢?下面就给大家…...
怎么在windows系统上查看kylinos的md5、sha1、sha256值
背景 当前信创行业正如火如荼进行中,当下载kylinos镜像到windows系统下,如何核对镜像是否有损坏,确保文件不被篡改,需要使用工具计算md5、sha1、sha256、sha512值,并与出库邮件中的md5比对。 QuickHash GUI软件简介 QuickHash GUI是一款开源代码的哈希工具,注意哈希能够…...
Windows中在C#中使用Dapper和Mysql.Data库连接MySQL数据库
Windows中在C#中使用Dapper和Mysql.Data库连接MySQL数据库 在Windows中使用C#连接Mysql数据库比较简单,可以直接使用MySql.Data库,目前最新版本为:8.3.0。 当然也可以结合MySql.Data和Dapper库一起使用,目前Dapper的最新版本为&a…...
大一专科,物联网专业,变态成长偏方!
最近看到一个大一,物联网专业的学生提问: 印象中,物联网专业2011年才有的,正好是我毕业那年。 我大概看过物联网专业要学的内容,总结下来就是,比软件不如计算机,比硬件知识不如电子。 不知道老师…...
MyBatis入门(JDBC规范,MyBatis,连接池,Lombok)【详解】
目录 一、JDBC规范【了解】 1. JDBC介绍 2. JDBC示例 3. JDBC的问题 二、MyBatis入门【重点】 1. Mybatis是什么 2. Mybatis使用步骤 3. Mybatis入门案例 1.创建SpringBoot工程 2.创建Mapper 3.功能测试 三、连接池【了解】 1. 什么是连接池 2. 有哪些数据库连接池…...
Vue3--数据和方法
data 组件的 data 选项是一个函数。Vue 在创建新组件实例的过程中会自动调用此函数。 data选项通常返回一个对象,然后 Vue 会通过响应性系统将其包裹起来,并以 $data 的形式存储在组件实例中。 <!DOCTYPE html> <html lang"en"&g…...
网络编程面试题
一、什么是IP地址 1.IP地址是主机在网路中的唯一标识,,当主机从一个网络切换到另一个网络时,会更改IP地址,同样的IP地址也是路由器进行路由选择的标识 2.IP地址的分类 IPV4:采用4字节无符号整数存储 IPV6ÿ…...
移动端区分点击和长按
为了适配移动端,图片加入touchstart,touchend,并加了 e.preventDefault() 屏蔽默认菜单。 然而突然发现移动端图片的链接无响应了,PC端没问题。 而且功能需要区分点击和长按。 原生js如何判断移动端的tap,dbltap,lo…...
虚拟环境的激活
(此博客仅用于我记录虚拟环境的激活方法) 虚拟环境的激活命令: venv/Scripts/activate 在F:\git repo\Database-Course-Design 这个文件夹中启动命令行 这个文件夹中含有虚拟环境venv 输入命令venv/Scripts/activate,就得到下面的结果: 此时就激活了虚拟环境&…...
宏集案例 | 风电滑动轴承齿轮箱内多点温度采集与处理
前言 风力发电机组中的滑动轴承齿轮箱作为关键的传动装置,承担着将风能转化为电能的重要角色。齿轮箱内多点温度的实时监测可以有效地预防设备故障和性能下降。实时监测齿轮箱内多点温度可以有效地预防设备故障和性能下降。 为了确保风力发电机组的安全稳定运行&a…...
linux 16进制写入
1.简单用法[推荐] echo 001122334455 | xxd -r -ps > test // 6 个字节xxd // xxd 命令用于用二进制或十六进制显示文件的内容 -r // 把xxd的十六进制输出内容转换回原文件的二进制内容 -ps // 以 postscript的连续十六进制转储输出,这也叫做纯十六进…...
前端倒计时误差!
提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...
基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南
🚀 C extern 关键字深度解析:跨文件编程的终极指南 📅 更新时间:2025年6月5日 🏷️ 标签:C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言🔥一、extern 是什么?&…...
【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)
本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...
【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案
目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后,迭代器会失效,因为顺序迭代器在内存中是连续存储的,元素删除后,后续元素会前移。 但一些场景中,我们又需要在执行删除操作…...
【Linux手册】探秘系统世界:从用户交互到硬件底层的全链路工作之旅
目录 前言 操作系统与驱动程序 是什么,为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中,我们在使用电子设备时,我们所输入执行的每一条指令最终大多都会作用到硬件上,比如下载一款软件最终会下载到硬盘上&am…...
WEB3全栈开发——面试专业技能点P7前端与链上集成
一、Next.js技术栈 ✅ 概念介绍 Next.js 是一个基于 React 的 服务端渲染(SSR)与静态网站生成(SSG) 框架,由 Vercel 开发。它简化了构建生产级 React 应用的过程,并内置了很多特性: ✅ 文件系…...
前端开发者常用网站
Can I use网站:一个查询网页技术兼容性的网站 一个查询网页技术兼容性的网站Can I use:Can I use... Support tables for HTML5, CSS3, etc (查询浏览器对HTML5的支持情况) 权威网站:MDN JavaScript权威网站:JavaScript | MDN...
boost::filesystem::path文件路径使用详解和示例
boost::filesystem::path 是 Boost 库中用于跨平台操作文件路径的类,封装了路径的拼接、分割、提取、判断等常用功能。下面是对它的使用详解,包括常用接口与完整示例。 1. 引入头文件与命名空间 #include <boost/filesystem.hpp> namespace fs b…...
2025.6.9总结(利与弊)
凡事都有两面性。在大厂上班也不例外。今天找开发定位问题,从一个接口人不断溯源到另一个 接口人。有时候,不知道是谁的责任填。将工作内容分的很细,每个人负责其中的一小块。我清楚的意识到,自己就是个可以随时替换的螺丝钉&…...
