Nginx 解决做反向代理时静态资源图片、 js、css 访问不到

巴韭特锁螺丝 2025-03-14

#反向代理
location / {
  proxy_pass http://localhost:9001;
}


#解决js css 访问不到的问题
location ~ .* {
   proxy_pass http://localhost:9001;
   proxy_set_header Host $http_host;
   proxy_set_header X-Real-IP $remote_addr;
   proxy_set_header X-Forw $proxy_add_x_forwarded_for;
}


复制

补充

如果你需要跨域访问 Nginx 服务器上的静态资源，可以通过 Nginx 的配置添加 CORS 头部来实现。下面是一个示例配置：

打开 Nginx 的配置文件。默认情况下，Nginx 的主配置文件位于 etc/nginx/nginx.conf 或 etc/nginx/conf.d/default.conf。

在配置文件中找到或创建一个 server 或 location 块来处理静态资源请求，并添加以下内容：

location /statics/ {
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
    }


    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept';


    alias /path/to/static/files/;
}




复制

上述配置在 /statics/ 路径下处理静态资源请求，并添加了 CORS 头部。add_header 指令用于设置不同的 CORS 头部字段，* 表示允许任何来源进行跨域访问。你可以根据要求进行更改。

在上述配置中，还添加了对预检请求（OPTIONS 请求）的处理。预检请求用于检查是否允许进行跨域请求。当接收到 OPTIONS 请求时，Nginx 返回 204 状态码和相应的 CORS 头部，以便浏览器判断是否允许跨域请求。

替换配置中的 /path/to/static/files/ 为实际存储静态文件的路径。

保存配置文件。

重新加载 Nginx 服务，使配置生效。在终端中运行以下命令：

sudo nginx -s reload


复制

现在，Nginx 将返回指定路径中的静态资源，并添加了 CORS 头部，允许跨域访问。

请注意，CORS 头部的设置必须符合相应的安全性和合规性要求。适当设置 Access-Control-Allow-Origin 字段以限制允许访问的来源，以增强安全性。

版权声明：本文内容来自CSDN：夏末初涼い，遵循CC 4.0 BY-SA版权协议上原文接及本声明。
本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行可。
原文链接：https://blog.csdn.net/dmt742055597/article/details/131781934
如有涉及到侵权，请联系，将立即予以删除处理。
在此特别鸣谢原作者的创作。
此篇文章的所有版权归原作者所有，与本公众号无关，商业转载建议请联系原作者，非商业转载请注明出处
复制

文章转载自巴韭特锁螺丝，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

Nginx 解决做反向代理时静态资源图片、 js、css 访问不到

补充

评论

相关阅读

Nginx 解决做反向代理时 静态资源图片、 js、css 访问不到

补充

评论

相关阅读

Nginx 解决做反向代理时静态资源图片、 js、css 访问不到