axios nginx 生产环境_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)代理走;如果没有/，则会把匹配的路径也给代理走。

二、开发环境

vue.config.js中

proxy: {

//配置跨域

'/api': {

target: "https://www.baidu.com",

changOrigin: true,

pathRewrite: {

'/api': ''

}

}

}

注意：

1. axios请求的完整URL：/api/company/list

2. axios的baseURL为空

3. 浏览器network请求地址Request URL一般类似为：http://localhost:8080/api/company/list

示例：

return request({

url: '/api/GetProvinceList',

method: 'get',

params: params

})