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)代理走;如果没有/,则会把匹配的路径也给代理走。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章