搞清楚浏览器的同源策略，不要再有has been blocked by CORS policy: No Access-Control-Allow-Originheader报错了

最新推荐文章于 2025-03-26 10:54:03 发布
最新推荐文章于 2025-03-26 10:54:03 发布
阅读量840 收藏 1
点赞数
分类专栏： html 服务器 文章标签： html apache nginx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38674371/article/details/106140963
版权
同源策略是浏览器的安全策略，限制了不同源之间的交互。本文介绍了同源策略的原理和解决跨域问题的方法，特别是通过CORS（跨域资源共享）设置Origin头部来实现资源访问。同时提到了简单请求与非简单请求的区别。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

什么是同源策略

  1. 首先同源策略是浏览器的一种安全策略，所有同源策略的限制都是浏览器给予前端页面的。
  2. 同源的源指的就是URL,什么样的URL属于同源呢，有三个限制。 必须URL的protocol\prot\host相同，通俗一点讲就是你url前面的必须一摸一样。
    原始URL http://A.B.com/C/D
URL 是否同源 原因
http://A.B.com/C/E 同源
http://A.B.com/C/E/F 同源
https://A.B.com/C/E 同源 协议不同
http://A.B.com:81/C/E 同源 端口不同
http://J.B.com/C/E 同源 主机不同

同源策略就是浏览器要遵守的一种协议。浏览器就相当于一个办公大楼，URL对应一个楼层的一个房间（即URL）。同一个楼层就相当于是同一家公司，是自己人（即同源）。我可以使用所在房间内的所有资源（板凳椅子等），同时也能使用同楼层的资源，但是我不可以使用其他楼层的资源。这样就可以保护各个楼层的安全，防止有人进行盗窃呀偷看机密文件呀什么的。
但是这样同样会出现一个问题，就是如果我租用了这幢大楼的AB两层，那么同源策略就是不允许A的员工进入B楼层，即使两个楼层都是我的。虽然这样尽职尽责，但是对于我不合理呀。
所以就引出

最低0.47元/天 解锁文章
出现 has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present on the 解决方法
码农研究僧的博客
06-03 1万+
Access to XMLHttpRequest at 'http://127.0.0.1:5000/api/data' from origin 'http://10.197.0.79:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
解决xxx by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present on the requested resource问题
念兮为美
08-09 4178
今天登录ant design pro时，报出登录失败的问题，于是打开控制台，如是：xxx 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.研究几种解决方案。......
宝塔部署项目遇到“Access-Control-Allow-Origin”跨域问题，通过调整nginx的时候需要注意，不是在nginx配置文件，是在网站管理里面进行配置
feixuewisdomlee的博客
05-05 1945
uniapp项目遇到跨域问题的解决方法
Vue中axios请求 提示has been blocked by CORS policy:....No ‘Access-Control-Allow-Origin‘ header 跨域问题
wisxiaobai的博客
04-12 4116
1.在vue.config.js下添加 devServer: { proxy: { '/api': { target: 'xxxxxx', // 请求接口地址 changeOrigin: true, pathRewrite: { '^/api': '' } }, } } 2.修改 axios.defaults.baseURL = '/api' ...
跨域资源共享（CORS）策略引起的浏览器拦截
最新发布
weixin_74417835的博客
03-26 304
的后端服务器发送请求时，浏览器出于安全考虑会进行 CORS 检查。如果后端服务器没有正确配置 CORS 头信息，就会阻止请求。这个错误是由跨域资源共享（CORS）策略引起的。当你的前端应用（运行在。在 Spring Security 配置中允许 CORS。1、在后端添加 CORS 配置（推荐）
前后端分离跨域问题：has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ heade
wyx_160724的博客
08-26 3299
Access to XMLHttpRequest at 'http://localhost:82/user/findUserById?id=3' from origin 'http://127.0.0 has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 当在进行前后端分离的时候，前端页面请求后台数据的数据，在浏览器出不来数据，且报以下错误
H5访问跨域问题，提示信息：has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present...
大后生大大大的博客
12-13 2389
1.出现问题场景： 1.1 H5端的同事请求我一个获取验证码的接口，前提是H5端的同事在http的请求头中需要携带一个Token。后端是是SpringCloud写得，BaseController里面同意进行了跨域处理： @CrossOrigin //统一处理跨域请求问题 @RestController public class BaseController { // 业务代码 } ...
跨域请求被拦截问题——has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present on...
热门推荐
weixin_43660476的博客
03-20 3万+
在开发前后端分离的项目时，必须解决的一个问题就是跨域请求问题。 1 什么是跨域请求 跨域请求就是指：当前发起请求的域与该请求指向的资源所在的域不同时的请求。即“协议 + 域名 + 端口号” 有不相同，那么就是跨域。 例如，如下在开发中遇到的跨域请求被拦截问题。 前端的端口是8080，而后端的端口是8000，前端请求后端的时后端会检查request的origin，发现是8080，跟自己的8000不一致，就会有跨域拦截。 跨域请求问题可以在前端解决，也可以在后端解决。 1）前端的解决方法——使用正向代理，隐藏
解决前端跨域：has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header...
kfgauss的博客
05-04 2251
解决前端跨域：has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header... 吃葡萄要吐皮 2019-09-16 14:52:18 67775 已收藏 11 展开 在前端工作中，有时候会碰到跨域的问题，就是请求的接口地址和本身的服务器不属于一个域内，此时浏览器会报错： XXXXX（请求的跨域url）...
解决跨域has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘，利用Proxy反向代理
我还起舞了的博客
11-21 4313
我们要配置反向代理的原因是：因为跨域问题我们直接拿不到跟我们不同域名不同端口号下的数据，这是浏览器的跨域限制，我们不能在浏览器上显示后端的数据，但是服务器端没有跨域限制，所以可以让我们自己的服务器（项目运行，会启动一台服务器），去请求后端服务器，拿到数据，然后再传给我们前端。反向代理服务器的应用：往这个接口发请求，被拦截到了，凡是往这个接口发请求的，反向代理服务器，会在前面加上target域名 ，往真实的地址去请求。在vue.config.js文件中进行以下配置proxy，具体配置信息可以看下文。
in ‘null‘ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present on the
weixin_39183462的博客
02-01 637
CORS（Cross-Origin Resource Sharing）是一种安全机制，它允许或拒绝来自不同源（即不同的域、协议或端口）的Web页面上的脚本对资源的访问。当你使用jQuery进行跨域请求时，如果服务器没有适当地设置头部，浏览器会报这样的错误。这个问题通常需要在服务器端解决，服务器需要在响应中包含头部，来指明哪些源可以访问该资源。
解决前端跨域：has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header...
海海不掉头发的的博客
12-25 5166
在前端工作中，有时候会碰到跨域的问题，就是请求的接口地址和本身的服务器不属于一个域内，此时浏览器会报错： XXXXX（请求的跨域url）has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested 网上有很多的解决办法，可以用jsonp来请求等等。 这里...
[Nginx] 解决跨域been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the r...
程序员老狼专注开发aigc或客服系统应用
03-01 3407
当需要跨域请求接口会出现 been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 可以在代码里解决 , 也可以直接在nginx里解决 类似GOFLY部署在nginx下的代码 加上header头就可以了 ad...
解决跨域问题 has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present
unber的博客
09-14 2281
前端页面设置；由于跨域， 画布被污染，不能调用 toBlob(), toDataURL() 或 getImageData() 方法，调用它们会抛出安全错误。然而这种解决方法只可以解决你自己服务器的问题，你总不能去微信或其他第三方服务器添加请求头吧。项目需要拉取用户的头像，而linkedin和微信的头像存放于cdn中，这边涉及到的跨域问题。
axios请求解决跨域问题has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is
weixin_69218754的博客
05-06 3604
axios请求解决跨域问题
拦截被拒绝报错：has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is。。。
antfightOttoman的博客
06-29 370
拦截被拒绝 请求被拦截has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is //vue前端请求 axios.get('http://localhost:8181/role/findAllbyPage/1/2').then(function (resp) { console.log(resp) //后端 @CrossOrigin //添加注解 public class RoeHan
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is presen
02-08
如果你在浏览器的开发者工具中看到了"has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present"的错误，说明你的请求被目标服务器拒绝了。这通常是因为目标服务器没有设置正确的CORS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值