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 字段以限制允许访问的来源,以增强安全性。