关于Vue-Cli 4.0的跨域问题

因为今天写项目遇到了这个问题，所以想稍微记录一下这个问题

Vue-Cli 4+配置跨域是需要自己在根目录下创建一个Vue.config.js文件的。然后就可以在里面写入项目的各种配置。
我们简单看下下面的代码

module.exports = {
  devServer: {
    port: 8080, //默认的打开端口号
    open: true, //自动打开浏览器
    host: 'localhost', //本地地址
    proxy: {    	  //在此配置跨域
    // '/api' 这里是你需要配置的接口地址域名后跟的后缀，
    // 即为地址后的/api,例如这个地址http://www.xxxxxx.com/api
      '/api': {       
        target: 'http://www.xxxxxx.com/api',//后端的接口地址
        changeOrigin: true, //开启跨域
        pathRewrite: {
          '^/api': '',//这里即为重写后的地址，baseURL里的地址要换成这个
        },
      },
    },
  },
};

好了，说完上面的基本配置，然后看下怎么去配置请求
我们也可以在项目里创建一个service文件夹 然后在里面创建一个http.js文件，这里可以专门写关于axios的配置

然后我们看看axios在项目里的基本配置，可以这样使用，这里的baseURL即为上面在vue.config.js里重写之后的地址

import axios from 'axios'

const http = axios.create({
  baseURL: '/api',
  timeout: 10000
});

export default http

之后我们可以在项目里的main.js文件里将http挂载到Vue的原型中。
在根目录下的main.js文件里加入下面代码

import http from './service/http';

Vue.prototype.$axios = http;

之后你就可以直接像这样在vue页面中使用axios请求了，跨域问题也解决了

methods:{
 async getData() {
 //这里实际请求的地址是http://www.xxxxxx.com/api/getData
 const res = await this.$axios.get('/getData') 
 console.log(res)  //调用这个方法之后在这里就可以打印接口返回的数据了
 }
}

另外就是，如果你想把所有接口都放到同一个文件夹里统一管理，可以像这样，在service文件夹里创建一个api.js文件，这是所有后端接口的管理文件

import Vue from 'vue';
const axios = Vue.prototype.$axios;
//注册接口
async function regist(name, username, password) {
  return await axios.post('/account/register', { name, username, password });
}

//登录接口
async function login(username, password) {
  return await axios.post('/account/login', { username, password });
}

export { regist, login };

然后在vue页面中引入需要使用到的方法就好了，可以使用一个变量接收一下这个函数返回的数据。

好了，简单记录一下，这也只是我个人写项目的一点拙见，如果有什么更好的方法，欢迎提出，互相交流学习