1. vue中配置跨域后, 后端服务代理配置. 这里表示将所有的 /dev-api/ 开头的请求都转发到下面 proxy_pass 指定的链接中. 为了防止在访问页面时请求就被 Nginx 代理转发,这里需要更具体的配置,才能和前端访问请求区分开
2. Vue 路由刷新时可能会抛出 404, 配置的@router 实际上是引用下面的转发. 下面的router, 由于路由的资源不一定是真实的路径,无法找到具体文件. 所以需要将请求重写到 index.html 中,然后交给真正的 Vue 路由处理请求资源
server {listen 80;server_name 192.168.15.245; #本机iplocation / {root html/dist/;try_files $uri $uri/ @router;index index.html;}location @router {rewrite ^.*$ /index.html last;}location /dev-api/ { #后端统一代理前缀# 后端的真实接口proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header REMOTE-HOST $remote_addr;proxy_pass http://192.168.15.245:8086/; #后端服务地址}
}