前端在vue.config.js解决跨域

首先解释为什么会出现跨域：
出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。
举个列子：我们前端的页面比如是http://192.168.3.25:8080/login，我们需要请求后端的接口比如是http://192.168.3.56:9088/api/xxx，那么这个时候不仅主机不同，端口号也不同，产生了跨域。这时候没有部署到线上，本地调试我们就需要解决跨域来让接口数据正常访问。这时候就分后端解决和前端解决，这里我就说一般前端解决跨域。
如果没有vue.config.js文件，在根路径新建vue.config.js文件，然后配置跨域代理：

'use strict'

const name = process.env.VUE_APP_TITLE || 'xxx' // 网页标题

const port = process.env.port || 80 // 端口

// vue.config.js 配置说明
// 这里只列一部分，具体配置参考文档
module.exports = {
  // 部署生产环境和开发环境下的URL。
  publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
  // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
  outputDir: 'dist',
  // 是否开启eslint保存检测，有效值：ture | false | 'error'
  lintOnSave: process.env.NODE_ENV === 'development',
  // webpack-dev-server 相关配置
  devServer: {
    host: '192.168.3.xx',//自己本机的主机地址
    port: port,//自己的端口号
    open: true,
    //以上的ip和端口是我们本机的;下面为需要跨域的
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        //这里是后台接口地址
        target: process.env.VUE_APP_BASE_API,
        changeOrigin: true,//允许跨域
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    disableHostCheck: true
  },
  //文件路径的配置，比如在src/assets/images/xx.png可以写成@/assets/images/xx.png
  configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  },
  //生产环境去除控制台console.log的打印
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
    }
  },
}