最简单的vue 跨域处理 proxy

跨域问题来源于JavaScript的同源策略,即只有 协议+主机名+端口号(如存在)相同,则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源，主要是安全问题。

1.首先在项目的根目录下建一个vue.config.js

2.具体配置如下

module.exports = {
	devServer: {
    open: true,
    disableHostCheck: true,
    host: "127.0.0.1",
    port: 8888,
    https: false,
    hotOnly: false,
    proxy: {
      "/api": {
        //开发环境 解决跨域的api的域名   《接口地址》
        target: "http://test.com/api",
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          "^/api": " ",
        },
      },
    },
  },
}

3.使用的地方添加/api

新建.env.development 文件 并配置开发环境请求前缀（根据自己习惯，可以不用配置开发环境直接使用，我喜欢将开发，测试，生产环境都进行分开配置）

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = '/api'

请求：时使用前缀 + 路径

const baseUrl = process.env.VUE_APP_BASE_API;
axios({
      url: baseUrl + url,
      data: params,
      method: method,
      headers: headers,
      // 超时时间
      timeout: 60000,
    })