vue生產環境nginx配置代理轉發跨域

後端提供的請求接口完整地址示例：https://www.baidu.com/company/list

前端配置：

一：axios請求url:  /api/company/list

推薦此方法

方法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;

}

注意：proxy_pass https://www.baidu.com;   後面沒有 / 

二：axios請求url:  /company/list

適合後端提供的接口地址都是以統一前綴開頭的  比如  https://www.baidu.com/company/xxx,假如不是以統一前綴開頭的話，需要配置很多匹配路徑

location ^~ /company/ {

   proxy_pass https://www.baidu.com;  # 轉發地址

}

注意：proxy_pass https://www.baidu.com;   後面沒有 /  

 

解釋：在nginx中配置proxy_pass時，當在後面的url加上了/，相當於是絕對根路徑，則nginx不會把location中匹配的路徑（/api）代理走;如果沒有/，則會把匹配的路徑也給代理走。