vue项目中axios跨域设置

最近项目中遇到一个问题，测试环境和线上环境需要调同一个接口（接口地址是线上的），本地开发的时候遇到了跨域的问题，刚开始用了fetch解决的，代码如下

方法一

step1：安装包node-fetch，然后再在vue文件script下面引入以下代码

const fetch = require('node-fetch');

const Bluebird = require('bluebird');

fetch.Promise = Bluebird;

 

step2:vue文件中的调用接口代码

      return fetch('http://m.didimessage.com/api/shorturl/api/shorturl/generate',{
        method:'post',
        body: JSON.stringify(params),
        headers: {
          "Cross-Method":'CORS',
          'Content-Type':'application/json',
        },
      }).then(res=>{
        console.log('fetch-res',res);
        return res.json();
      }).then(data=>{
        console.log('fetch-data',data);
        if (data.code != "200") {
          this.$notify({
            title: "",
            message: "res.msg",
            type: "error",
          });
          return;
        }
        console.log('shortUrl',data.data.shortUrl);
        window.location =data.data.shortUrl;
      }).catch(err=>console.log('err',err))

但是遇到一个问题，在ie中打开的时候，ie不支持fetch,所以页面显示空白

所以只能在项目里在axios基础上设置跨域

方法二

step1: 在main.js里面写入以内代码

import Axios from 'axios'
Vue.prototype.$http = Axios

step2: 在项目的vue.config.js文件中插入以下代码（vuecli3构建的项目默认没有此文件，可以手动创建此文件，与src在同一级目录）

module.exports = {

  devServer: {
    // host:"0.0.0.0",
    proxy: {
      '^/api': {
        target: process.env.VUE_APP_HOST,
        ws: true,
        changeOrigin: true,
      },
      '/generate':{ //此处为设置跨域的配置，此处的generate可以随意命名，只要在vue文件调用接口时，对应的url地址以‘generate’开头，即可
        target: 'https://m.didimessage.com',//你要请求的第三方接口前缀
        changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite: { // 这里重写路径运行后就代理到对应地址
        '^/generate': '/' //意思是 把 '/generate' 替换成 '/'
        }
      }
    }
  }
}

//我们想要访问的接口地址
//是'https://m.didimessage.com/api/shorturl/api/shorturl/generate'
//所以我们vue里请求的地址只需要在请求的url前面加一个'/generate'
//即 let url =  'generate/api/shorturl/api/shorturl/generate'

step3:在vue文件中，调用接口

      let _url = 'generate/api/shorturl/api/shorturl/generate';
      this.$http.post(_url,params).then(data=>{
        console.log('fetch-data',data);

        if (data.status != "200") {
          this.$notify({
            title: "",
            message: "res.msg",
            type: "error",
          });
          return;
        }
        console.log('shortUrl',data.data.data.shortUrl);
        window.location =data.data.data.shortUrl;
      }).catch(err=>console.log('err',err))