Access to CSS stylesheet at ‘http://xxx‘ from origin ‘http://xxx‘ has been blocked by CORS policy

已于 2023-07-05 10:50:52 修改
阅读量1.4k 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： CORS secure policy more-private origin
于 2023-07-05 10:44:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Balmunc/article/details/131550185
文章描述了一个在使用GoogleChrome浏览器时遇到的访问网站错误，错误信息涉及到CORS政策和安全上下文问题。问题根源在于尝试访问的CSS资源在更私密的地址空间。解决方案是改用HTTPS协议访问网站，确保浏览器处于安全上下文中。

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

问题重现：

Google Chrome浏览器访问网站报错：

Access to CSS stylesheet at 'http://xxx/theme/default/zh-cn.default.css?v=12.3.3'from origin 'http://xxx' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space 'private*.

 排查：

使用Microsoft Edge浏览器可以访问正常网站，那就是Google Chrome浏览器的问题了

解决办法：

如果是Google Chrome浏览器，需要使用https协议访问网站

Balmunc
关注
出现 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.
Access to CSS stylesheet at ‘http://127.0.0.1:5500/XXX‘ from origin..如何解决不能通过现网访问本地路径文件css、js、html等?
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
03-24 1192
看到CORS这个让人有种跨域既视感，那么问题来了，之前能跨域现在不能了？是 chrome 增加了新的跨域规则了吗？如果是，好家伙，奇怪的知识又增加了！
v3+ts+vite 打包后打开indx.html 控制台报Access to CSS stylesheet at ‘file:///D:/static.......
走走停停
05-02 544
综上所述，在面对由 Vite/Vue3/TypeScript 构建的应用被打包成独立网页形式之后再尝试运行却遭遇到了 Cross-Origin Resource Sharing(CORS)方面的阻碍现象时，最佳实践便是借助简易 web server 来模拟线上真实环境条件来进行调试测试工作流程。
【跨域问题解决】Access to XMLHttpRequest at xxx from origin xxx has been blocked by CORS
aaaa_aaab的博客
08-26 1426
这个错误是由于浏览器的同源策略（CORS, Cross-Origin Resource Sharing）导致的。当从一个源（origin）向另一个源请求资源时，如果这两个源的协议、域名或端口号不同，就会触发CORS策略。解决方法要解决这个问题，你需要在你的后端服务中添加CORS支持，以便它允许来自你的请求。这通常涉及到在你的后端服务器中添加适当的响应头（Headers）。
css style study
weixin_34115824的博客
12-23 94
<img style="float:none;display:block;margin:0px auto" src="images/aa.jpg"> float：元素在哪个方向浮动，左右或不浮动,left,right,none margin：边距为0 display 属性规定元素应该生成的框的类型。block，此元素将显示为块级元素，此元素前后会带有换行符。 http://ww...
解决跨域常见方案（is therefore not allowed access)
任玉
09-22 2103
什么是跨域： 在同一网页中即跨域名，跨端口，跨协议。但是 跨域问题的产生： 1、浏览器限制卡u雨
解决跨域has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘，利用Proxy反向代理
我还起舞了的博客
11-21 4393
我们要配置反向代理的原因是：因为跨域问题我们直接拿不到跟我们不同域名不同端口号下的数据，这是浏览器的跨域限制，我们不能在浏览器上显示后端的数据，但是服务器端没有跨域限制，所以可以让我们自己的服务器（项目运行，会启动一台服务器），去请求后端服务器，拿到数据，然后再传给我们前端。反向代理服务器的应用：往这个接口发请求，被拦截到了，凡是往这个接口发请求的，反向代理服务器，会在前面加上target域名 ，往真实的地址去请求。在vue.config.js文件中进行以下配置proxy，具体配置信息可以看下文。
Vue学习笔记（三）Vue2三种slot插槽的概念与运用 | ES6 对象的解构赋值 | 基于Vue2使用axios发送请求实现GitHub案例 | 浏览器跨域问题与解决
希望每天都能进步一点点
06-23 1547
Vue学习笔记（三）Vue2四种slot插槽的概念与运用 | ES6 对象的解构赋值 | 基于Vue2使用axios发送请求实现GitHub案例 | 浏览器跨域问题与解决
Access to image at ‘xxx‘ from origin ‘xxx‘ has been blocked by CORS policy解决方案
qq_71214810的博客
05-24 3409
这个错误表明你尝试从某个源（origin）加载阿里云上的图片时，浏览器因为CORS（跨源资源共享）策略阻止了这次请求。尽管图片能正常显示，但浏览器的控制台仍然会报告这个错误，因为请求不满足CORS的要求
Access to XMLHttpRequest at 'xxx' from origin 'xxx' has been blocked by CORS policy: No 'Access-Cont
范范范国超的博客
10-24 6265
标题上写不上了，直接观看下面的截图。 1.现象 2.分析原因 屏幕前的你是不是也遇到了这样的问题？你知道为什么会出现这样的问题吗？就是因为跨域引起的问题。 还不知道什么是跨域？简单来讲：就是跨域不同的域名进行访问。由于在不同域名间访问的不安全性，所以有了跨域的诞生。 具体概念如下：只要协议、域名、端口有任何一个不同，都被当作是不同的域。为什么会产生跨域这个问题呢，要是随便引用外部文件，不...
跨域css加载,css跨域加载字体
weixin_42529366的博客
08-04 1492
一直以为css中链接的资源，不会因为跨域而导致加载失败。比方说图片。但今天还是遇到了跨域失败的问题。chrome浏览器中提示：Access to Font at 'http://static.utsing.com/ienglish/font.ttf' from origin 'http://ienglish.utsing.com' has been blocked by CORS policy: ...
chrome 更新跨域规则，将对网站造成影响 谷歌图片跨域了
u014651093的专栏
02-23 1542
在 chrome v94 之后，之前没有问题的网站接口请求现在出现了错误： Access to Css stylesheet at ‘http:xx’ from origin ‘http://xx‘ has been blocked by CORS policy: The request client is not a secure context and the resource is in more-prevate adddress spacelocal 看到CORS这个让人有种跨域既视感...
引用import的JS报错：Access to script at 'file:' from origin 'null' has been blocked by CORS policy（3种解决手段）
热门推荐
xiao廸要飞
05-12 4万+
直接引用带有import关键字的JS脚本会报错：Access to script at ‘file:’ from origin ‘null’ has been blocked by CORS policy index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic
vite创建的项目，打包后的文件本地预览报错 Access to script at ‘...‘ from origin ‘null‘ has been blocked by COR
小白成长记
08-29 4544
http-server -p 8090 // 8090为自己设置的端口号，不要跟之前打开的冲突即可。打包后的文件打开报错，原因是file文件不支持import，需要开启个服务。打开图中地址即可访问打包后的项目。进入打包后的文件夹，运行cmd。...
Access to XMLHttpRequest at ‘域名1 ‘ from origin ‘域名2‘ has been blocked by CORS java跨域问题详细解决方案
qq_36255346的博客
06-17 7308
Access to XMLHttpRequest at ‘域名1 ‘ from origin ‘域名2‘ 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 to XMLHttpRequest has been blocked by CORS policy
myyw001的博客
12-27 2237
has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space `private`.
解决谷歌浏览器跨域问题has been blocked by CORS policy: The request client is not a secure context and the resou
鹏仔工作室的秘密基地
07-29 1万+
刚开始想着是代码出现了问题，但是我用360浏览器发现正常使用，没有出现跨域问题，于是查了相关资料，最终发现是升级了谷歌浏览器后配置出现了问题。早期开发的一个后台项目，需要在浏览器中通过读卡器设备读取身份证信息，使用谷歌打开，报了如下跨域问题。查询后，修改为“Disabled”，并Relaunch重新启动下，点击后会自动重启浏览器。进入谷歌浏览器，在网址栏输入下方路径访问。重启后，就解决了此跨域问题。接着输入下方关键词查询。...
js修改伪元素的属性、styleSheets获取样式表，Failed to read the 'cssRules' property from 'CSSStyleSheet' Cannot acces
苏轻轻的专栏
04-24 1万+
登录验证中的判断逻辑 1.提示输入用户，输入8 - 16位密码2.检验输入用户名和密码是否正确 用户名不允许空格，任何字符数字都行，不允许为空 密码8-16位，不允许空格 ，小于8位给出提示 密码必须包含字母，数字，符号两种 手机号码，11位，只允许数字 效果类似于 想要达成的目的 实现提示时，用的span的伪元素加载背景图片，实现icon...
Access to XMLHttpRequest at xxx has been blocked by CORS policy:request ....
leaves_story的博客
03-10 5694
前端请求接口报错，接口返回：404； 前端控制台错误信息提示：Access to XMLHttpRequest at xxx has been blocked by CORS policy:request header field content-type is not allowed by Access-Control-Allow-Headers is preflight response; 原因是前端发送得请求中，header中包括了不被允许的请求头，比如使用JWT时，前端请求在header中..
http://127.0.0.1:81/h5/assets/uni.305abb0d.css
最新发布
06-27
在访问或调试本地开发的 H5 页面中的静态资源文件（如 CSS）时，如果遇到类似 `http://127.0.0.1:81/h5/assets/uni.305abb0d.css` 无法访问的问题，通常涉及以下几个方面： ### 服务器配置问题 确保运行本地 HTTP 服务的程序（例如使用 Node.js、Python 的 SimpleHTTPServer 或其他工具）正常运行，并且监听了正确的端口（如 81）。可以通过访问 `http://127.0.0.1:81` 来验证主页面是否能够正常加载。如果主页面也无法访问，则说明服务未正确启动或端口被占用。 ### 路由与路径映射问题 检查服务器是否正确地将 `/h5/assets/` 路径映射到实际存放静态资源的目录。例如，在 Express.js 中可能需要通过如下代码来设置静态资源目录： ```javascript app.use('/h5/assets', express.static(path.join(__dirname, 'public/assets'))); ``` 如果路径配置错误，将导致 CSS 文件无法被正确加载[^2]。 ### MIME 类型不匹配问题 浏览器会根据响应头中的 `Content-Type` 判断资源类型，若返回的 MIME 类型不匹配（如本应为 `text/css` 但返回的是 `text/html`），则会阻止该资源的加载，并提示类似“MIME 类型不匹配”的错误信息。确保服务器对 `.css` 文件返回正确的 MIME 类型。例如在 Nginx 配置中可以添加： ```nginx location ~ \.css$ { add_header Content-Type text/css; } ``` 或者在 Express.js 中自动处理 MIME 类型，无需手动设置，只要使用内置的 `express.static` 方法即可[^1]。 ### 跨域问题（CORS） 如果你是从一个远程网站尝试加载本地资源（如通过 `<link rel="stylesheet" href="http://127.0.0.1:81/h5/assets/uni.305abb0d.css">`），浏览器出于安全考虑会阻止此类跨域请求。解决方法是在本地服务器中启用 CORS 支持，例如在 Express.js 中添加： ```javascript app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); next(); }); ``` 这将允许所有来源访问你的静态资源，但在线上环境中建议限制来源以提高安全性[^2]。 ### 浏览器缓存问题 有时浏览器会缓存旧的 404 响应，即使你已经修复了服务器端问题，仍可能看到“资源未找到”的提示。此时可以尝试清除浏览器缓存或使用无痕模式重新加载页面。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值