axios实现vue生产/开发环境的跨域及突破host和referer的限制

1. axios基本使用：

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

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

2. vue开发环境的设置

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

module.exports = {
    devServer: {   
        // the proxy setting: to solve CORS
        proxy: {
            '/migus':{
                target: 'https://m.music.migu.cn/',  // target host
                ws: true,  // proxy websockets 
                changeOrigin: true,  // needed for virtual hosted sites
                pathRewrite: {
                    '^/migus': ''  // rewrite path
                },
                headers: {
                    referer: 'https://m.music.migu.cn/',
                }
            }
        }
    }
}

3. vue生产环境（待验证）

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

vue生产环境解决api的host，referer：

参考这篇文章 不知能不能实现：

location /get/ {
	set $hostx “”;
	set $addrs “”;
	if ( $uri ~ “^/get/http./+([^/]+)/(.+)$”) {
	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的！

vue生产环境解决api的跨域：

在nginx中设置：

    server {
        listen       80;
        server_name  127.0.0.1;
        location /migus {
        	# api跨域代理设置
	       rewrite ^/migus/(.*)$ /$1 break;
	       proxy_pass https://m.music.migu.cn/;
	       # nginx反向代理设置referer与host
	       proxy_set_header referer "https://m.music.migu.cn/"
	    }
	    
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
           root   html;
        }
    }