vue解决跨域问题

前言

vue解决跨域问题很简单，只需要修改cli中的配置，在vue.config.js文件中修改以下内容即可，没有此文件的可以自行创建。

一、所有接口统一配置

module.exports = {
  devServer: {
    proxy: 'http://192.168.0.1'
  }
}

注意： 1、 proxy内容是需要代理的地址，仅ip或域名，不包含具体地址； 2、如果地址带有端口号的话，端口号也要带上。

二、不同地址分开配置

一个项目中，有时可能会出现多个不同路径地址，这个时候就需要分别去做代理。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '<url>',
        pathRewrite: { "^/api": "/" },
      },
      '/foo': {
        target: '<other_url>',
        pathRewrite: { "^/foo": "/" },
      }
    }
  }
}

三、搭配环境变量使用

项目开发过程中，开发环境和生产环境是不同的，为了区分，搭配环境变量使用，是一个值得推荐的方法。 在项目根目录下创建以下两个文件

开发环境 文件名： .env.development 内容：

NODE_ENV = 'development'

VUE_APP_LOGIN = "http://192.168.0.1"
VUE_APP_URL = "http://192.168.0.1/foo"

生产环境 文件名： .env.production 内容：

NODE_ENV = 'production'

VUE_APP_LOGIN = ""
VUE_APP_URL = "/foo"

vue.config.js中devServer内容

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: process.env.VUE_APP_LOGIN ,
        pathRewrite: { "^/api": "" },
      },
      '/foo': {
        target: process.env.VUE_APP_URL ,
        pathRewrite: { "^/foo": "" },
      }
    }
  }
}

注意： 1、环境变量中NODE_ENV的命名和值是固定的，不做修改； 2、其它环境变量的命名和值都可自定义； 3、如果接口没有统一前缀，可以自行手动添加，以便于配置代理，代理时需要替换为空。