vue跨域配置

现在做管理系统基本上都是前后分离的项目，前后端部署在不同的域名下，那么就会出现跨域的问题，一般是需要后端进行跨域设置才能够进行正常的访问。如果在开发过程中，后端在没有配置跨域的情况下，vue cli项目如何设置才能进行跨域访问呢？

一、在根目录下的vue.config.js（如果没有的话需要新建这个文件）里进行跨域设置：

module.exports = {
  devServer: {
    proxy: {
      //匹配以/api开头的地址
      '/api': {
        //要访问的跨域的域名，此处应填写你需要调用接口的实际地址
        target: 'http://192.168.100.100:8080',
        //允许跨域
        changOrigin: true,
        //重写路径，即在实际请求的过程中会去掉网址中的/api
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

二、在创建axios实例的时候将baseURL设置为/api

const instance = axios.create({
    baseURL: '/api'
});

如果在请求接口的时候出现了“Access to XMLHttpRequest at...Access-Control-Allow-Origin”这些字的时候，如果您使用的vue-cli搭建的项目，可以尝试用上面的方法来解决跨域问题。