Nginx请求图片资源跨域问题

最新推荐文章于 2024-04-10 03:35:46 发布
最新推荐文章于 2024-04-10 03:35:46 发布
阅读量776 收藏
点赞数
文章标签： nginx chrome 运维
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/llllllllolllllll/article/details/132406686
版权

如果你配置了proxy_pass但依旧还是跨域，可以试试这个

在<head>标签中添加这两个meta

<meta http-equiv="Cross-Origin-Embedder-Policy" content="require-corp">
<meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin">

  1. Cross-Origin-Embedder-Policy： 这个HTTP头部或 <meta> 标签设置告诉浏览器在请求资源时使用什么策略。require-corp 表示资源需要在一个安全的上下文中加载，而不是在不安全的上下文中。换句话说，如果资源的加载环境不是安全的，则浏览器会阻止加载该资源，这有助于防止一些安全风险。

  2. Cross-Origin-Opener-Policy： 这个HTTP头部或 <meta> 标签设置控制页面是否能够共享其内容的跨域上下文。same-origin 表示页面只能与同源的内容共享跨域上下文。这对于安全性也是很有帮助的，因为它限制了跨域页面的影响范围。

        这些标签和策略的引入，加上正确配置的NGINX代理服务器，确保了跨域请求在更安全和可控的环境中进行。

BeWiseAndClear
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
深入浅析Nginx实现AJAX跨域请求问题
10-22
AJAX从一个域请求另一个域会有跨域的问题。那么如何在nginx上实现ajax跨域请求呢？此问题难住很多朋友，下面小编给大家带来了Nginx实现AJAX跨域请求问题的相关知识，感兴趣的朋友一起学习吧
nginx安装, 解决跨域问题
04-25
在linux 下安装nginx, 解决网页访问时报跨域问题, 只用改配置文件, 亲测有效
nginx配置（图片跨域问题）
fo_xi的博客
11-17 298
【代码】nginx配置（图片跨域问题）
nginx设置图片跨域访问
tanqingfu1的博客
03-09 3764
生而为人 谁不付出 谁不努力 #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { ...
nginx代理解决跨域问题_nginx 跨域解决，2024年最新都是精髓
最新发布
2401_84181340的博客
04-10 1050
跨域（Cross-Origin）是指在 Web 开发中，一个网页的运行脚本试图访问另一个网页的资源时，这两个网页的域名、协议或端口号任何一个不同，就被称为跨域。跨域是由浏览器的同源策略（Same-Origin Policy）所限制的。同源策略是一种安全机制，它防止一个网页的脚本去读取另一个不同域名的网页内容。同源策略要求两个网页的协议、主机和端口号必须完全相同，否则就会出现跨域问题。简单来说，同源策略要求不同域名的网页之间不能相互访问对方的资源。
nginx 解决图片跨域问题
qq_42851623的博客
09-14 1502
server { listen 80; server_name static.xx.com; location ~* .(html|htm|shtml|zip|rar|doc|docx|xls|xlsx|ppt|ppts|gif|jpg|jpeg|png|bmp|swf|ico|js|css)$ { root /data/htdocs/xx; add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Headers X
NGINX解决第三方图片跨域问题
qq_26685883的博客
02-11 5637
项目场景： 前端展示第三方图片并需要对图片做编辑，当对方图片服务不允许跨域时会产生跨域问题(CORS)，导致图片操作效果失败 原因分析： 出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协
Nginx 图片跨域设置
Yel_Liang的博客
07-20 922
跨域处理
nginx图片跨域问题
qq_22266389的博客
10-09 185
【代码】nginx图片跨域问题。
nginx配置图片跨域代理
akko
10-20 1291
/uploads/picture/ 为请求地址段 例如访问：https://xxx.com/uploads/picture/a.png 访问被代理成了：https://xxx.xxx.com/uploads/picture/a.png 也就是从xxx.com域名访问 代理到了 访问 xxx.xxx.com 域名 location ~ /uploads/picture/.*\.(jpg|jpg|jpeg|png|bmp)$ { proxy_pass https://xxx.xxx.co
nginx实现静态页面，图片分离
weixin_33738578的博客
11-01 226
nginx(静态页面，图片分离) #vi /usr/local/nginx/conf/nginx.conf user nginx nginx; worker_processes 1; events { worker_connections 1024; } http { include mime.types; ...
nginx解决跨域问题的实例方法
09-29
在本篇文章里小编给各位分享了关于nginx怎么解决跨域问题的方法和实例代码，需要的朋友们参考下。
如何用Nginx解决前端跨域问题
09-30
在开发静态页面时，类似Vue的应用，我们常会调用一些接口，这些接口极可能是跨域，这篇文章主要介绍了如何用Nginx解决前端跨域问题，非常具有实用价值，需要的朋友可以参考下
nginx跨域问题，解决多端口，多ip问题
03-26
使用nginx进行服务器管理，经常会遇到跨域问题，此文档就是解决此类问题； nginx跨域问题，解决多端口，多ip问题
nginx设置图片跨域
zdt888的博客
01-28 670
今天一个项目，前端要跨域调用另一个项目的图片，由于我们用的是nginx ,查了一下资料，设置了一下nginx 的图片跨域： location ~* \.(gif|jpg|jpeg|png|bmp|swf)$ { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Headers X-Requested-With; add_header Access-Control-Allow-Methods GET,POST,O
nginx请求头添加跨域
09-14
在使用Nginx时，可以通过使用ngx_http_headers_module模块中的add_header指令来添加跨域请求头。具体的语法是：add_header name value [always];其中name代表请求头的名称，value代表请求头的值。可以在http、server、location或if in location这些上下文中使用add_header指令。一般来说，我们可以在动态接口（如php）后面添加允许跨域的头，以实现跨域请求。 在Windows版本的Nginx RTMP服务器中，已经添加了nginx-rtmp-module。您只需解压缩包后将nginx.exe所在路径添加到环境变量中，然后进入该目录，并运行命令nginx.exe -c conf\nginx-rtmp.conf即可启动服务。这已经在Win11上进行了测试验证。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

BeWiseAndClear

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值