[亲测有效]一键解决困扰已久的VUE-CORS前端跨域问题

[亲测有效]

一键解决困扰已久的VUE-CORS前端跨域问题

1. 找到config/index.js
   设置proxyTable，实际上就是设置代理路径，设置config文件之后，需要重新npm run dev或者npm run serve
   
   源码：

module.exports = {
  devServer: {
    host: 'localhost',
    port: 8081,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://localhost:8089',// 要跨域的域名
        changeOrigin: true, // 是否开启跨域
        pathRewrite: {
            '^/api': '/'
        }
      },
    },
  },
}

2. 新建一个封装axios的文件，如 src/api/index.js
   
   代码：

import axios from 'axios';

const instance = axios.create({
    timeout: 10000,
    headers: {
        'Content-Type': "application/json;charset=utf-8"
    }
});

export default {
    userLogin ( data ) {
        return instance.post('/api/user/login', data);
    },

};

3. 在main.js中引用并且暴露出来：
   

import instanceImport from './api/index';

Vue.prototype.instance = instanceImport