vue 前端解决跨域问题 —代理 面试官也喜欢问哦！

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

在很多时候跨域问题我都是让后端解决，嘿嘿。但也有需要自己解决的项目！

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

2. 如下：

   //改变webpack的设置
   
    const { default: Axios } = require("axios")
    
    module.exports = {
        publicPath :"./",
        devServer: {
            // 设置主机地址
            // host: 'xxx.1xx.1xx.xxx',
            // // 设置默认端口
            // port: 8051,
            // 设置代理
            proxy: {
                '/api': {
                    // 目标 API 地址
                    target: 'http://xxx.xxx.xxx.xxx:8051',//服务器地址
                    // 如果要代理 websockets
                    ws: true,
                    // 将主机标头的原点更改为目标URL
                    changeOrigin: false
                }
            }
       },
       chainWebpack: config => {//没有用到scss的这里就不需要啦！
          const oneOfsMap = config.module.rule('scss').oneOfs.store
           oneOfsMap.forEach(item => {
             item
                .use('sass-resources-loader')
                .loader('sass-resources-loader')
                .options({
                    // 要公用的scss的路径
                    resources: './src/assets/base.scss'
                })
                .end()
              })
          }
      }
   

授道解惑？10行代码 1行注释，2行括号，3行废话，4行bug !