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 参数原则

1. URL 必须以 http 或 https 开头；
2. URL 中可以携带变量；
3. URL 中是否带 URI ，会直接影响发往上游请求的 URL ； 

接下来让我们来看看两种常见的 URL 用法：

1. proxy_pass http://192.168.100.33:8081
2. proxy_pass http://192.168.100.33:8081/

这两种用法的区别就是带 / 和不带 / ，在配置代理时它们的区别可大了：

• 不带 / 意味着 Nginx 不会修改用户 URL ，而是直接透传给上游的应用服务器；可以理解为相对路径；
• 带 / 意味着 Nginx 会修改用户 URL ，修改方法是将 location 后的 URL 从用户 URL 中删除；可以理解为绝对路径；

不带 / 的用法：

location /bbs/{
  proxy_pass http://127.0.0.1:8080;
}

分析： 

1. 用户请求 URL ： /bbs/abc/test.html
2. 请求到达 Nginx 的 URL ： /bbs/abc/test.html
3. 请求到达上游应用服务器的 URL ： /bbs/abc/test.html

带 / 的用法：

location /bbs/{
  proxy_pass http://127.0.0.1:8080/;
}

分析：

1. 用户请求 URL ： /bbs/abc/test.html
2. 请求到达 Nginx 的 URL ： /bbs/abc/test.html
3. 请求到达上游应用服务器的 URL ： /abc/test.html