vue跨域问题

现在访问http://iwenwiki.com:3000/personalized/newsong（网易云的歌曲接口）当用axios发起请求，报错‘Access-Control-Allow-Origin’，如下图所示：

就是跨域问题，可以用下面的方法解决：

在vue.config.js添加下图所示的代码：

devServer: {
  proxy: {
    '/api': {
      target: 'http://iwenwiki.com:3000',//目标网址
      changeOrigin: true,//允许跨域
      ws:"true",
      pathRewrite: {
        '^/api': ''
      }
    }
  }
}

然后将axios的url替换成， url: 'personalized/newsong'，重新启动项目，即可。（一定要Ctrl+c结束，然后npm run serve命令启动项目）

会发现问题得以解决，但是，将项目打包（打包命令是npm run build），将dist上传到gitee，用gitee生成的网址访问自己的项目时，会发现，跨域请求再次出现问题。

解决方法：

在项目中添加两个文件--.env.dev、.env.production，如下图所示：

 .env.dev的内容为NODE_ENV='dev'，.env.production的内容为NODE_ENV='prod'，然后更改package.json的内容：

 最后在main.js添加下列的代码：

if(process.env.NODE_ENV=="'dev'"){
  axios.defaults.baseURL='api'
}else{
  axios.defaults.baseURL='http://iwenwiki.com:3000'
}

 

 接下来，在重新打包，将dist文件上传到gitee，重新生成访问网址，再次访问dist下的index.html就没有问题啦。