在项目中经常会遇到跨域的情况，也没怎么研究过，今天就来探讨一下：

何为跨域

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。所谓跨域就是违背了浏览器的同源策略，那么同源策略又是什么呢？同源策略要求请求两侧的三个一致:协议一致、主机名一致、端口号一致。注意：这是浏览器的一种策略。由此可能会产生一个误区：跨域是浏览器向服务器请求了数据，服务为也返回了数据，只是浏览器没有把数据交给我们

解决跨域

解决跨域有不同的方法，这里说一下通过配置代理服务器的方法解决。那么何为代理服务器呢？通俗的来说就是一个中间上，而且不赚差价：浏览器要代理服务器请求数据，代理服务器再把请求转给真正的服务器;而服务器返回也是直接返回数据给代理服务器，代理服务器再把数据返回给浏览器，而代理服务器和发生请求的服务器之间压根就没有同源策略这一限制，不会存在跨域问题，(同源策略是浏览器的规则)

Vue的跨域配置

在Vue.config.js里配置如下：

module.exports = {
    //开启代理服务器(方式一)，代理服务器默认端口和项目是一致的，不需要处理，但是接口请求的时候需要使用代理服务器的源
    //使用以下方式---代理服务器不会把所有的请求都转发给真实服务器,在以下情况不会把请求准发给真实服务器
    //1.代理服务器本身就有-Vue项目的public文件夹就相当于代理服务器的根路径，如果请求的资源在public文件夹存在就不会转交给真实服务器了
    /*devServer: {
      proxy: 'http://localhost:4000',//这里的地址是真实的服务器的源，只需要写协议，主机名和端口号
    }*/
    //使用以上方式配置不够灵活:不能配置多个代理(既代理到A服务器又代理到B服务器)，不能灵活的控制请求走不走代理(真实的请求可能是有些需要代理有些不需要代理)

    //开启代理服务器(方式二)
    devServer: {
      proxy: {
        '/test': {//请求前缀，有这个前缀(紧跟端口号)的才会走代理
          target: 'http://localhost:4000',//后端的接口
          pathRewrite:{"^/test":""},//pathRewrite的key写一个正则的匹配条件,匹配以test开头的路径，把test替换为空字符串
          ws: true,//用于支持websocket
          changeOrigin: true//是否对告诉真实服务器真实的源，false不改变源(真实的源) true(改变源)-----用于控制请求头中的host值
        },
        '/demo': {
          target: 'http://localhost:4000',
          pathRewrite:{"^/demo":""}
        }
      }
    }

  };

配置好代理，需要重启项目
配置代理，不能使用axios的baseUrl。否则代理不会生效