静态资源跨域解决办法--nginx

本文介绍了一种在 Laravel 框架中实现图片跨域访问的方法。通过使用 barryvdh/laravel-cors 包及 Nginx 配置,实现了 public/img 目录下图片的跨域 GET 请求。此外,还提供了 jQuery AJAX 请求示例。

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

api 已做跨域处理,感兴趣的可以看 barryvdh/laravel-cors
下面是对 public/img 下的图片做的跨域处理

nginx 配置

      location ~ /img {

          add_header Content-Type 'text/html; charset=utf-8';
          add_header Access-Control-Allow-Origin *; 
          return 200 '{"msg":"/api/"}'; 测试时确保命中
      }

ajax 请求

            $.ajax({
        type:'GET',                
url:"http://localhost/img/1.png",

                success:function(result){
                   $("#div1").html(result);
                }
           });

请求结果

 

静态资源跨域解决办法

 

静态资源跨域解决办法

ajax 代码可以随意复制粘贴到一个具有 jquery 并且跨域的站点的 console 执行

### Nginx 配置解决问题 为了使Nginx能够处理来自不同源的HTTP请求,即解决CORS(Cross-Origin Resource Sharing)问题,在Nginx配置文件中添加特定的响应头是必要的措施之一。对于`Access-Control-Allow-Origin`头部来说,可以通过如下方式来设置: #### 方法一:全局配置允许所有名访问 如果目标是在开发环境中快速验证功能或是确实需要开放给任何来源站点访问资源,则可以在http、server或location上下文中加入以下指令[^1]。 ```nginx add_header Access-Control-Allow-Origin *; ``` 然而需要注意的是,这种做法存在安全隐患,因为它意味着所有的外部网站都可以无条件地向该服务发起请求并获取数据。 #### 方法二:指定单个或多个可信任的名 更安全的做法是指定具体的可信源站地址作为`Access-Control-Allow-Origin`的值。这可以有效防止未经授权的第三方网站滥用API接口。 ```nginx add_header Access-Control-Allow-Origin http://example.com; # 或者支持多名时使用正则表达式匹配 if ($http_origin ~* (http://|https://)(www\.)?(domain1\.com|domain2\.com)) { add_header Access-Control-Allow-Origin $http_origin; } ``` 除了上述基本配置外,有时还需要额外声明其他相关联的CORS头部信息以便更好地控制资源共享行为,比如允许哪些方法(`GET`, `POST`)以及自定义请求头字段等[^3]。 ```nginx add_header Access-Control-Allow-Methods "GET, POST, OPTIONS"; add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"; ``` 特别注意针对预检请求(Preflight Request),也就是浏览器发送OPTIONS类型的探测性请求之前端会先询问服务器是否同意实际操作所携带的方法和headers组合;因此建议为这类特殊场景也做好相应准备。 最后提醒一点关于字体文件之类的静态资源,默认情况下它们不会自动带上这些CORS相关的头部信息,所以如果你的应用涉及到此类资产加载失败的情况,请记得单独为其路径下的资源加上合适的cross-origin属性或者调整Nginx配置以确保正常工作[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值