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

艺帆风顺 发布于 2025-04-02 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如有涉及到侵权，请联系，将立即予以删除处理。在此特别鸣谢原作者的创作。此篇文章的所有版权归原作者所有，与本公众号无关，商业转载建议请联系原作者，非商业转载请注明出处