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

原创 已于 2023-07-05 10:50:52 修改 · 1.6k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#CORS #secure #policy #more-private #origin

于 2023-07-05 10:44:35 首次发布
文章描述了一个在使用GoogleChrome浏览器时遇到的访问网站错误，错误信息涉及到CORS政策和安全上下文问题。问题根源在于尝试访问的CSS资源在更私密的地址空间。解决方案是改用HTTPS协议访问网站，确保浏览器处于安全上下文中。

问题重现：

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
关注
nginx代理服务报Mixed Content: The page at ‘https://xxx.com‘ was loaded over HTTPS
Bertram的博客
04-18 9655
使用nginx代理后端服务时出现如下错误: Mixed Content: The page at ‘https://xxx.com’ was loaded over HTTPS, but requested an insecure stylesheet ‘http://xxx.com’. This request has been blocked. the content must be served over HTTPS. 错误原因: nginx代理的https页面中加载的内容使用的http协议导致报
Nuxt3 - 解决报错 Cannot find module ‘windicss/helpers‘ | Require stack: xxx，nuxt3+vite运行项目出现报错提示找不到模块“wi
🏆 前端领域优质创作者
07-26 3733
nuxt3，vite，启动报错，Cannotfindmodule'windicss/helpers'，nuxt3运行报错，nuxt3安装windicss/helpers，启动不了，提示报错，出错，nuxt3执行install安装依赖后运行项目报错，安装依赖后运行不起来了，nuxt.config.ts，nuxt3.x+vite项目无法运行，Requirestack，rundev，打包，构建，详细解决教程，NUXT3Cannotfindmodule'windicss/helpers'，缺少vi
Access to CSS stylesheet at ‘http://127.0.0.1:5500/XXX‘ from origin..如何解决不能通过现网访问本地路径文件css、js、html等?
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
03-24 1391
看到CORS这个让人有种跨域既视感，那么问题来了，之前能跨域现在不能了？是 chrome 增加了新的跨域规则了吗？如果是，好家伙，奇怪的知识又增加了！
解决跨域常见方案（is therefore not allowed access)
任玉
09-22 2139
什么是跨域： 在同一网页中即跨域名，跨端口，跨协议。但是 跨域问题的产生： 1、浏览器限制卡u雨
Access to image at from origin has been blocked by CORS policy: No ‘Access-Control-Allow-Origin 此图片来
浮游的博客
03-27 799
最近，在平台上发现很多图片无法展示，显示此图片来自微信公众平台，未经允许不可引用，分析原因后，发现是在发布文章时，富文本编辑器get图片，有跨域问题。在网上搜了很多方案，例如img.setAttribute(‘crossOrigin’, ‘anonymous’)，发现无效，于是想到代理服务器。思路：传递图片地址过去 让后端给转成buffer返回给前端，前端再上传二进制图片，到oss，获得链接。传过去图片地址，前端根据后端返回的blob，上传图片，最终完美解决。在前端富文本中进行配置。新建一个node项目。
Access to XMLHttpRequest at ‘域名1 ‘ from origin ‘域名2‘ has been blocked by CORS java跨域问题详细解决方案
qq_36255346的博客
06-17 7499
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 at xxx from origin xxx has been blocked by CORS
aaaa_aaab的博客
08-26 1840
这个错误是由于浏览器的同源策略（CORS, Cross-Origin Resource Sharing）导致的。当从一个源（origin）向另一个源请求资源时，如果这两个源的协议、域名或端口号不同，就会触发CORS策略。解决方法要解决这个问题，你需要在你的后端服务中添加CORS支持，以便它允许来自你的请求。这通常涉及到在你的后端服务器中添加适当的响应头（Headers）。
css style study
weixin_34115824的博客
12-23 106
<img style="float:none;display:block;margin:0px auto" src="images/aa.jpg"> float：元素在哪个方向浮动，左右或不浮动,left,right,none margin：边距为0 display 属性规定元素应该生成的框的类型。block，此元素将显示为块级元素，此元素前后会带有换行符。 http://ww...
消息队列实践一之RabbitMQ消息推送（解决服务器错误:Whoops! Lost connection to ws://localhost:15674/ws）
Yolanda_NuoNuo的专栏
06-22 5746
一、写在前面的问题和解决办法 1、问题背景： RabbitMQ，用websock推送消息失败 2、问题描述： 服务器错误:Whoops! Lost connection to ws://localhost:15674/ws 3、解决办法： 网上查了好久说，加上这个jackson-core的jar包。我加啦啊！没有用啊！ 我还换了版本试了还是报这个错。 <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/j
无法在web.xml或使用此应用程序部署的jar文件中解析绝对uri：[http://www.springframework.org/security/tags]
changtan20000的博客
02-04 6551
无法在web.xml或使用此应用程序部署的jar文件中解析绝对uri：[http://www.springframework.org/security/tags] 已经添加 spring-security-taglibs yil tomcat 版本 9.0.22 spring 版本 5.0.15 spring security 版本 5.0.13 JDK8 pom.xml <?xml ver...
hive报错：Call from hostname/127.0.1.1 to localhost:9000 failed on connection exception.主节点9000端口拒绝访问.
九师兄
12-02 5164
1.美图 2.背景 (base) lcc@lcc hadoop-2.7.4$ sh sbin/start-all.sh This script is Deprecated. Instead use start-dfs.sh and start-yarn.sh 19/12/02 11:00:58 WARN util.NativeCodeLoader: Unable to load native-ha...
解决跨域has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘，利用Proxy反向代理
我还起舞了的博客
11-21 4561
我们要配置反向代理的原因是：因为跨域问题我们直接拿不到跟我们不同域名不同端口号下的数据，这是浏览器的跨域限制，我们不能在浏览器上显示后端的数据，但是服务器端没有跨域限制，所以可以让我们自己的服务器（项目运行，会启动一台服务器），去请求后端服务器，拿到数据，然后再传给我们前端。反向代理服务器的应用：往这个接口发请求，被拦截到了，凡是往这个接口发请求的，反向代理服务器，会在前面加上target域名 ，往真实的地址去请求。在vue.config.js文件中进行以下配置proxy，具体配置信息可以看下文。
解决“Access to XMLHttpRequest at ‘XXX’ from origin ‘http://localhost’ has been blocked by CORS policy”
我是 二川兄，对Web开发、GIS开发、3D模型、机器学习、面试技巧等方面都有一些涉猎~ 欢迎您加入技术交流圈！你可以在我的文章末尾找到我~
08-23 1万+
解决“Access to XMLHttpRequest at ‘XXX’ from origin ‘http://localhost’ has been blocked by CORS policy”
Access to image at ‘xxx‘ from origin ‘xxx‘ has been blocked by CORS policy解决方案
qq_71214810的博客
05-24 4314
这个错误表明你尝试从某个源（origin）加载阿里云上的图片时，浏览器因为CORS（跨源资源共享）策略阻止了这次请求。尽管图片能正常显示，但浏览器的控制台仍然会报告这个错误，因为请求不满足CORS的要求
Access to XMLHttpRequest at 'xxx' from origin 'xxx' has been blocked by CORS policy: No 'Access-Cont
范范范国超的博客
10-24 6298
标题上写不上了，直接观看下面的截图。 1.现象 2.分析原因 屏幕前的你是不是也遇到了这样的问题？你知道为什么会出现这样的问题吗？就是因为跨域引起的问题。 还不知道什么是跨域？简单来讲：就是跨域不同的域名进行访问。由于在不同域名间访问的不安全性，所以有了跨域的诞生。 具体概念如下：只要协议、域名、端口有任何一个不同，都被当作是不同的域。为什么会产生跨域这个问题呢，要是随便引用外部文件，不...
出现 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.
2021 chrome 更新跨域规则，将对网站造成影响
Hanko的专栏
11-17 1513
chrome 更新跨域规则，将对网站造成影响 在 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 spaceloc.
跨域css加载,css跨域加载字体
weixin_42529366的博客
08-04 1534
一直以为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 1581
在 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这个让人有种跨域既视感...
Access to CSS stylesheet at 'file:///D:/assets/index-BIzXwP5d.css' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: chrome, chrome-extension, chrome-untrusted, data, http, https, isolated-app.
最新发布
06-07
### 解决CORS策略阻止从null origin访问本地CSS文件的问题 跨域资源共享（CORS）策略是一种安全机制，旨在防止浏览器中的恶意脚本对用户数据进行未经授权的访问。当一个资源（如CSS文件）被加载时，浏览器会检查该资源是否允许来自请求源（origin）的访问。如果请求的源是`null`（例如，从`file://`协议加载页面），则服务器需要显式允许`null`源访问资源[^1]。 为了使本地CSS文件能够被正确加载，可以采取以下方法： 1. **配置服务器以支持CORS** 在服务器端设置适当的CORS头，允许`null`源访问资源。可以通过在HTTP响应中添加`Access-Control-Allow-Origin`头来实现。例如，在Apache或Nginx服务器上配置如下： ```apache Header set Access-Control-Allow-Origin "null" ``` 或者在Nginx中： ```nginx add_header Access-Control-Allow-Origin "null"; ``` 2. **使用HTTP服务器而非file://协议** 如果可能，避免直接通过`file://`协议加载页面。改用本地HTTP服务器（如Python的SimpleHTTPServer、Node.js的http-server或Apache/Nginx）来提供资源。这将确保请求的源不再是`null`，而是类似于`http://localhost`的合法源。 例如，使用Python启动一个简单的HTTP服务器： ```python python -m http.server 8000 ``` 3. **修改浏览器的安全策略（仅适用于开发环境）** 在开发环境中，可以通过禁用CORS检查来绕过限制。例如，在Chrome中可以使用`--disable-web-security`标志启动浏览器。需要注意的是，这种方法仅适用于开发和调试，不适用于生产环境。 ```bash google-chrome --disable-web-security --user-data-dir=/tmp/chrome_dev_session ``` 4. **嵌入CSS代码到HTML文件中** 如果无法更改服务器配置或启动HTTP服务器，可以将CSS代码嵌入到HTML文件中，而不是作为外部文件加载。这样可以避免CORS问题，但可能会降低代码的可维护性。 ```html <style> body { background-color: #f0f0f0; } </style> ``` 5. **调整Tomcat等应用服务器的配置（如果适用）** 如果使用的是Tomcat等应用服务器，可以参考引用内容[^2]，确保没有潜在的空指针异常或安全约束导致的问题。例如，确认RealmBase.hasRole()方法是否正确传递了Wrapper对象，并确保JNDI配置不会干扰CORS行为。 ```python # 示例：Python脚本用于启动简单HTTP服务器 import http.server import socketserver PORT = 8000 Handler = http.server.SimpleHTTPRequestHandler with socketserver.TCPServer(("", PORT), Handler) as httpd: print(f"Serving on port {PORT}...") httpd.serve_forever() ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值