部署到Nginx后,配置在vue中的针对某些请求(比如后端请求)的代理会失效(表现为这部分请求会404错误,但是项目css等静态资源都能正常访问),这时需要对Nginx配置相应的请求代理。
比如我们Vue项目的vue.config.js配置如下:
期望能将/api/为前缀的请求全都代理到http://10.3.0.145:8008/,本地以开发模式运行一切正常,但发布到Nginx后这个代理好像就失效了,api开头的请求都会404错误
module.exports = {
publicPath: '/',
devServer: {
port: 9090,
proxy: {
'/api': {
target: 'http://10.3.0.145:8008',
changeOrigin:true, //虚拟的站点需要更管origin
secure: false, //是否https接口
pathRewrite:{
'^/api':'' //重写路径
}
},
'/socket': {
target: 'ws://127.0.0.1:8008',
// target: 'ws://10.3.0.145:8008',
changeOrigin: true, //是否允许跨域
ws:true, //开启ws, 如果是http代理此处可以不用设置
pathRewrite: {
'^/socket': '' //重写
}
}
}
},
configureWebpack: {
devtool: "inline-source-map"
},
css: {
extract: false
}
};
现在需要对Nginx进行配置,首先我们将编译好之后的dist中的内容,放到Nginx的ops目录(我自定义的目录),里面应该有index.html这个首页文件。
然后修改Nginx配置为下面这样即可:
location / {
//根指定为 我们自定义的目录ops(位于Nginx安装目录下)
root ops;
# 此处的 @router 实际上是引用下面的转发,否则在 Vue 路由刷新时可能会抛出 404
try_files $uri $uri/ @router;
index index.html index.htm;
}
# 由于路由的资源不一定是真实的路径,无法找到具体文件
# 所以需要将请求重写到 index.html 中,然后交给真正的 Vue 路由处理请求资源
location @router {
rewrite ^.*$ /index.html last;
}
# 关键步骤,这里表示将所有的 /api/ 开头的请求都转发到下面 proxy_pass 指定的链接中
# 为了防止在访问页面时请求就被 Nginx 代理转发,这里需要更具体的配置,才能和前端访问请求区分开
location /api/ {
# 后端的真实接口
proxy_pass http://10.3.0.145:8008/;
proxy_redirect off;
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 Cookie $http_cookie;
# for Ajax
#fastcgi_param HTTP_X_REQUESTED_WITH $http_x_requested_with;
proxy_set_header HTTP-X-REQUESTED-WITH $http_x_requested_with;
proxy_set_header HTTP_X_REQUESTED_WITH $http_x_requested_with;
proxy_set_header x-requested-with $http_x_requested_with;
client_max_body_size 10m;
client_body_buffer_size 128k;
proxy_connect_timeout 90;
proxy_send_timeout 90;
proxy_read_timeout 90;
proxy_buffer_size 128k;
proxy_buffers 32 32k;
proxy_busy_buffers_size 128k;
proxy_temp_file_write_size 128k;
}
Vue代码不做任何改动,只需对Nginx进行与Vue中一样的代理配置即可解决代理请求404的问题。