VUE部署nginx跨域问题如何解决
Vue的代理跨域问题,需要确定的是在开发阶段可以使用,部署到服务器后出现请求失败的问题(404),如下图。
这是因为VUE在打包的过程中并没有把代理配置也进行打包,需要配置跨域代理,这里我使用的是服务器是nginx代理实现跨域问题。
先去百度上下载一个nginx,然后进入conf目录,打开nginx.txt配置文件,
找到如下配置
VUE配置的代理
devServer: {
proxy: {
'/request': { //以request后缀请求
target: '地址:端口', //转发地址
ws: true,
pathRewrite:{'^/request':'/'}, //把request 替换成/
changeOrigin: true
}
}
}
转换到对应的服务器的配置跨域如下
server {
listen 80;
server_name localhost;
#匹配请求头为 request,把request 换成/ 然后提交proxy_pass http这个指定地址
location ^~/request/ {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Credentials true;
proxy_set_header X-NginX-Proxy true;
rewrite ^(.*)request(.*)$ $1/$2; break;
#root html/dist;
proxy_pass http:这里是你的后台地址:端口号;
index index.html index.htm;
}
#匹配以/的请求 然后跳转到指定目录,
location / {
#我这里是指定的是nginx的html目录下的项目
root html/dist;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
以上配置就可以解决跨域代理问题
这是因为VUE在打包的过程中并没有把代理配置也进行打包,需要配置跨域代理,这里我使用的是服务器是nginx代理实现跨域问题。
先去百度上下载一个nginx,然后进入conf目录,打开nginx.txt配置文件,
找到如下配置
VUE配置的代理
devServer: {
proxy: {
'/request': { //以request后缀请求
target: '地址:端口', //转发地址
ws: true,
pathRewrite:{'^/request':'/'}, //把request 替换成/
changeOrigin: true
}
}
}
转换到对应的服务器的配置跨域如下
server {
listen 80;
server_name localhost;
#匹配请求头为 request,把request 换成/ 然后提交proxy_pass http这个指定地址
location ^~/request/ {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Credentials true;
proxy_set_header X-NginX-Proxy true;
rewrite ^(.*)request(.*)$ $1/$2; break;
#root html/dist;
proxy_pass http:这里是你的后台地址:端口号;
index index.html index.htm;
}
#匹配以/的请求 然后跳转到指定目录,
location / {
#我这里是指定的是nginx的html目录下的项目
root html/dist;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
以上配置就可以解决跨域代理问题