纯前端，vue利用axios解决跨域问题

步骤一：

在main.js中添加如下代码：

...省略
import axios from 'axios'
Vue.prototype.$axios = axios
axios.defaults.baseURL = '/api'  //关键代码，配置数据所在服务器的前缀
...省略

步骤二：

在文件"项目根目录/config/index.js"中，添加如下代码：

...
module.exports = {
  dev: {
...
    proxyTable: {
      '/api': {
        target: 'http://127.0.0.1', // 你请求的第三方接口
        changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite: {  // 路径重写，
          '^/api': ''  // 替换target中的请求地址
      },
    },
...
  },

步骤三：

在使用axios的地方

var url = "http://127.0.0.1/init";//原来的请求地址是：域名+"/xxx”
var urlNew = "/init";//现在改为：""/xxx”即可
axios.get(urlNew)

步骤四：重启vue，即可解决跨域问题！

---

生产环境配置

在main.js中修改

...省略
import axios from 'axios'
Vue.prototype.$axios = axios
const isProduction = Object.is(process.env.NODE_ENV, 'production')//是否生产环境
var baseUrl = isProduction ? 'https://www.***/index.php/Official（线上地址）' : 'api/'
axios.defaults.baseURL = baseUrl  //关键代码，配置数据所在服务器的前缀
...省略