vue开发环境、生产环境nginx配置代理转发跨域
后端提供的请求接口完整地址示例：https://www.baidu.com/list
一、开发环境
vue.config.js中
proxy: {
//配置跨域
'/api': {
target: "https://www.baidu.com",
changOrigin: true,
pathRewrite: {
'/api': ''
}
}
}
注意：
1. axios请求的完整URL：/api/list
2. 浏览器network请求地址Request URL一般类似为：http://localhost:8080/api/list
示例：
return request({
url: 'api/list',//此处api也可写到axios的baseURL中；
method: 'get',
params: params
})
二、生产环境
1. 访问路径为根域名：https://abc.com/
本地：
1. router: base: process.env.NODE_ENV=='development' ? '/' : '/',
2. vue.config.js: publicPath: process.env.NODE_ENV=='development' ? '/' : '/',
3. axios baseURL: process.env.NODE_ENV == 'development' ? '/api' : '/api',
nginx:
方法1：
location ^~ /api/ {
proxy_pass https://www.baidu.com/; # 转发地址
}
注意：proxy_pass https://www.baidu.com/; 后面要加 / 表示绝对路径;
方法2：
location ^~ /api/ {
rewrite ^/api/(.*)$ /$1 break; # 重写路径将 api 替换为空
proxy_pass https://www.baidu.com/;后面 / 可加可不加;
}
解释：在nginx中配置proxy_pass时，当在后面的url加上了/，相当于是绝对根路径，则nginx不会把location中匹配的路径（/api）代理走;如果没有/，则会把匹配的路径也给代理走。
2. 访问路径不是根域名：https://abc.com/demo/ 且不做SLB
本地：
1. router: base: process.env.NODE_ENV=='development' ? '/' : '/demo/',
2. vue.config.js: publicPath: process.env.NODE_ENV=='development' ? '/' : '/',
3. axios baseURL: process.env.NODE_ENV == 'development' ? '/api' : '/api',
nginx:
方法1：
location ^~ /api/ {
proxy_pass https://www.baidu.com/; # 转发地址
}
注意：proxy_pass https://www.baidu.com/; 后面要加 / 表示绝对路径;
方法2：
location ^~ /api/ {
rewrite ^/api/(.*)$ /$1 break; # 重写路径将 api 替换为空
proxy_pass https://www.baidu.com/;后面 / 可加可不加;
}
3. 访问路径不是根域名：https://abc.com/demo/ 要做SLB，SLB匹配路径是：https://abc.com/demo/
本地：
1. router: base: process.env.NODE_ENV=='development' ? '/' : '/demo/',
2. vue.config.js: publicPath: process.env.NODE_ENV=='development' ? '/' : '/demo/',
3. vue.config.js: outputDir: 'dist/demo', //否则找不到静态资源
4. axios baseURL: process.env.NODE_ENV == 'development' ? '/api' : '/demo/api', //否则nginx不能转发请求的接口
nginx:
基础配置：
location /demo {
root /mnt/project/h5-cbi360-net/dist;//指定根路径
index index.html index.html;
try_files $uri $uri/ /demo/index.html;//history路由配置，此处的 /demo 必须写在此处，不能写到上面root后面
}
方法1：
location ^~ /demo/api/ {
proxy_pass https://www.baidu.com/; # 转发地址
}
注意：proxy_pass https://www.baidu.com/; 后面要加 / 表示绝对路径;
方法2：
location ^~ /demo/api/ {
rewrite ^/api/(.*)$ /$1 break; # 重写路径将 /demo/api 替换为空
proxy_pass https://www.baidu.com/;后面 / 可加可不加;
}
解释： 具体的配置与本地项目有关系，与nginx配置有关系，与SLB配置有关系，与访问路径是否是根域有关系。
三、 带 / 和不带 / 的区别
URL 参数原则
URL必须以http或https开头；URL中可以携带变量；URL中是否带URI，会直接影响发往上游请求的URL；
接下来让我们来看看两种常见的 URL 用法：
proxy_pass http://192.168.100.33:8081proxy_pass http://192.168.100.33:8081/
这两种用法的区别就是带 / 和不带 / ，在配置代理时它们的区别可大了：
- 不带
/意味着Nginx不会修改用户URL，而是直接透传给上游的应用服务器；可以理解为相对路径； - 带
/意味着Nginx会修改用户URL，修改方法是将location后的URL从用户URL中删除；可以理解为绝对路径；
不带 / 的用法：
location /bbs/{
proxy_pass http://127.0.0.1:8080;
}分析：
- 用户请求
URL：/bbs/abc/test.html - 请求到达
Nginx的URL：/bbs/abc/test.html - 请求到达上游应用服务器的
URL：/bbs/abc/test.html
带 / 的用法：
location /bbs/{
proxy_pass http://127.0.0.1:8080/;
}分析：
- 用户请求
URL：/bbs/abc/test.html - 请求到达
Nginx的URL：/bbs/abc/test.html - 请求到达上游应用服务器的
URL：/abc/test.html
