axios实现跨域及突破host和referer的限制

1. axios基本使用&＃xff1a;

axios({methos: "get",url: "",params: {},headers:{}
})
.then(function (response) {console.log(response);
})
.catch(function (error) {console.log(error);
})


这就是一个最基本的axios的get请求案例&＃xff0c;尽管你在headers里设置了host和referer&＃xff0c;但是依旧会报错的。前端是无法直接设置host和referer的&＃xff0c;我们需要使用代理

2. vue开发环境的设置

亲测可用的解决办法&＃xff1a;axios&＃43;devServer配置。
在vue.config.js文件中&＃xff1a;这里以migu音乐为例

module.exports &＃61; {devServer: { // the proxy setting: to solve CORSproxy: {&＃39;/migus&＃39;:{target: &＃39;https://m.music.migu.cn/&＃39;, // target hostws: true, // proxy websockets changeOrigin: true, // needed for virtual hosted sitespathRewrite: {&＃39;^/migus&＃39;: &＃39;&＃39; // rewrite path},headers: {referer: &＃39;https://m.music.migu.cn/&＃39;,}}}}
}


3. vue生产环境&＃xff08;待验证&＃xff09;

nginx反向代理访问那些必带referer的api&＃xff0c;反向代理来指定http referer是不是可以解决问题

参考这篇文章 不知能不能实现&＃xff1a;

location /get/ {set $hostx “”;set $addrs “”;if ( $uri ~ “^/get/http./&＃43;([^/]&＃43;)/(.&＃43;)$”) {set $hostx $1;set $addrs $2;
}
resolver 127.0.0.1;
proxy_pass http://$hostx/$addrs;
proxy_set_header referer “http://$hostx“;# proxy_set_header referer 这项就是指定referer的&＃xff01;