Vue开发环境与生产环境使用代理解决跨域的方法 / 配置多个后台接口地址
1. 生产环境跨域/多个后台地址开发环境中配置proxy代理, vue自带的转发请求的方式, 只在开发环境中生效.proxyTable: {'/fnc': {target: 'http://152.136.194.152:8006/',changeOrigin: true, // -> 指示是否跨域ws...
·
1. 生产环境跨域/多个后台地址
开发环境中配置proxy代理, vue自带的转发请求的方式, 只在开发环境中生效.
proxyTable: {
'/fnc': {
target: 'http://152.136.194.152:8006/',
changeOrigin: true, // -> 指示是否跨域
ws: true,
pathRewrite: {
'^/fnc': '/api' // -> 可以使用 /fnc 等价于 后台接口的/api
}
},
'/api': {
target: 'http://192.168.0.134:8005/',
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': '/api'
}
}
}
2. 生产环境跨域/多个后台地址
生产环境中配置nginx代理, 在生产环境中, 由nginx转发请求.
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name _;
# root /usr/share/nginx/html;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location / {
root /usr/share/nginx/mobile/dist;
index index.html;
}
# 前端请求地址配置
location /api {
proxy_pass http://127.0.0.1:8004/api;
proxy_redirect default;
proxy_set_header Host 127.0.0.1;
proxy_set_header X-Real-IP $remote_addr;
}
location /fnc {
proxy_pass http://152.136.194.152:8006/api;
}
# 后台程序
location /file {
alias /root/CloudSignApproval/UserFile/;
index input.txt;
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)