已被CORS策略阻止：请求的资源上不存在“Access Control Allow Origin”标头。

时间: 2023-12-16 22:04:14 浏览: 193

静态文件访问不到报No Access-Control-Allow-Origin处理办法

在进行Web开发时，我们经常会遇到“跨域”（Cross-Origin）的问题，这通常是由于浏览器的同源策略（Same-Origin Policy）所导致的。当一个网页尝试从不同的源（协议、域名或端口）请求资源时，如果目标服务器没有允许这个源的权限，浏览器会阻止该请求，从而出现"No 'Access-Control-Allow-Origin' header is present on the requested resource"的错误。这个问题在使用静态文件（如字体文件.eot, .ttf, .woff等）时尤为常见，因为这些文件经常需要跨域加载以实现网页的样式和布局。解决这个问题的一种方法是通过配置Web服务器，比如Nginx，来添加`Access-Control-Allow-Origin`头部。这个头部允许指定哪些源可以访问服务器上的资源。在Nginx的配置文件中，我们可以为特定的URL模式添加这个头部，以允许任何来源（星号*代表所有）访问这些静态文件。以下是一个Nginx配置示例，展示了如何处理这个问题： ```nginx server { listen 80; server_name example.com; # 替换为你的实际域名 # 静态文件路径配置 root /var/www/html/static; # 替换为你的静态文件实际存储路径 location ~* \.(eot|ttf|woff)$ { # 匹配.ttf, .eot, .woff字体文件 add_header Access-Control-Allow-Origin *; # 允许所有来源访问 expires max; # 设置长期缓存 access_log off; # 关闭访问日志，节省磁盘空间 } # 其他配置... } ``` 在这个配置中，`location`指令用于匹配以`.eot`、`.ttf`或`.woff`结尾的请求。`add_header`指令则会在响应头中添加`Access-Control-Allow-Origin: *`，允许任何来源的请求。`expires max`用来设置长期缓存，减少客户端对这些文件的重复请求，提高页面加载速度。`access_log off`关闭了针对这个location的日志记录，以优化服务器性能。在修改Nginx配置后，记得重启Nginx服务以使新配置生效，命令通常是`sudo service nginx restart`或者`sudo systemctl restart nginx`，具体取决于你的操作系统。值得注意的是，虽然允许所有来源（`*`）可以方便地解决跨域问题，但这也意味着你的资源可能被任何网站使用，可能会带来安全风险。在生产环境中，更推荐明确指定可信任的源，例如： ```nginx add_header Access-Control-Allow-Origin http://example.com; ``` 这样只允许`http://example.com`的请求访问这些资源。了解了这个配置后，你就能有效地解决静态文件跨域访问的问题，同时也可以根据实际需求调整策略，平衡功能与安全性。

这是因为浏览器实施了跨域资源共享策略（CORS），限制了从一个源站点向另一个源站点发起的跨域请求。如果你想要从一个源站点向另一个源站点发起跨域请求，需要在目标站点的响应头中添加 "Access-Control-Allow-Origin" 标头来允许跨域请求。如果你是目标站点的开发者，可以在响应头中添加以下代码： ``` Access-Control-Allow-Origin: * ``` 这将允许来自任意源站点的跨域请求。如果你不是目标站点的开发者，那么你只能向目标站点的开发者请求添加相应的响应头来解决此问题。

阅读全文

已被CORS策略阻止：请求的资源上不存在“Access Control Allow Origin”标头。

相关推荐

Nginx跨域设置Access-Control-Allow-Origin无效的解决办法

已解决：No 'Access-Control-Allow-Origin'跨域问题

vue 已被CORS策略阻止：请求的资源上不存在“Access Control Allow Origin”标头。

访问位于“”的XMLHttpRequesthttp://localhost:8081/login?name=1&password=1'来自原点'http://localhost:8080'已被CORS策略阻止：请求的资源上不存在“Access Control Allow Origin”标头。

访问位于“”的XMLHttpRequesthttp://localhost:8084/jia“from origin”null“已被CORS策略阻止：对飞行前请求的响应未通过访问控制检查：请求的资源上不存在”access control Allow origin“标头。

php已被CORS策略阻止:“Access Control Allow Origin”标头包含多个值“*,*”,但

已被CORS策略阻止：“Access Control Allow Origin”标头包含多个值“*，*”，但只允许一个值。

vue 请求的资源上不存在“Access Control Allow Origin”标头。

CORS策略阻止：对飞行前请求的响应未通过访问控制检查：当请求的凭据模式为'include'时，响应中的'access-control-Allow-Origin'标头的值不得为通配符'*'。XMLHttpRequest发起的请求的凭据模式由withCredentials属性控制。

Access Control Allow Origin”标头。

cors-container:容器（Docker）中的CORS代理，用于需要Access-Control-Allow-Origin

Allow CORS: Access-Control-Allow-Origin-crx插件

原因：CORS 头缺少 'Access-Control-Allow-Origin'

Access-Control-Allow-Origin标头

vue 图片请求报错has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

如何增加Access-Control-Allow-Origin标头

has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values '*,

在 Access-Control-Allow-Origin 标头中未找到源

Access-Control-Allow-Origin 标头的作用是什么？

最新推荐

Nginx配置跨域请求Access-Control-Allow-Origin * 详解

全国江河水系图层shp文件包下载

管理建模和仿真的文件

Keras模型压缩与优化：减小模型尺寸与提升推理速度

MTK 6229 BB芯片在手机中有哪些核心功能，OTG支持、Wi-Fi支持和RTC晶振是如何实现的？

点云二值化测试数据集的详细解读

"互动学习：行动中的多样性与论文攻读经历"

Keras正则化技术应用：L1_L2与Dropout的深入理解

在Python中使用xarray和cfgrib库处理GRIB数据时，如何有效解决遇到的DatasetBuildError错误？

JDiskCat：跨平台开源磁盘目录工具

php已被CORS策略阻止:“Access Control Allow Origin”标头包含多个值“,”,但

已被CORS策略阻止：“Access Control Allow Origin”标头包含多个值“，”，但只允许一个值。