前后端分离项目部署nginx,跨域踩坑

it2024-08-11  38

nginx代理配置:

#前端vue项目配置

location / {               alias  /var/vue/default/dist/; #默认访问vue静态文件目录(dist路径)               index  index.html; #默认访问文件               try_files $uri $uri/ /index.html; #目录不存在则执行index.html         }

#后端接口配置

        location ^~ /api/ {             proxy_pass  http://ip:8089/;             proxy_set_header Host $host:$server_port;             add_header  'Access-Control-Allow-Origin' '*';             add_header  'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';             add_header  'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';         }

 由于未添加 proxy_set_header Host $host:$server_port;  swagger接口文档部分资源403,post请求也是403

Host的含义是表明请求的主机名,因为nginx作为反向代理使用,而如果后端真是的服务器设置有类似防盗链或者根据http请求头中的host字段来进行路由或判断功能的话,如果反向代理层的nginx不重写请求头中的host字段,将会导致请求失败【默认反向代理服务器会向后端真实服务器发送请求,并且请求头中的host字段应为proxy_pass指令设置的服务器】(参考链接https://www.cnblogs.com/faberbeta/p/nginx008.html)

最新回复(0)