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