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

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

#反向代理
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 字段以限制允许访问的来源，以增强安全性。

******************************* 只要思想不滑坡，办法从比困难多*******************************