1.什么是跨域?

浏览器同源策略 && 请求是ajax类型

如果A地址和B地址在： 协议 域名 端口 不全相同，则说明请求是跨域的；

2.为什么要跨域?

由于同源策略的存在，浏览器限制了跨域获取cookie，也限制了跨域DOM节点的访问，有效的防止的CRSF攻击。当然发起CRSF攻击还有其它手段。

3.如何解决跨域?

1.jsonp的原理就是利用<script>标签没有跨域限制，通过<script>标签src属性，发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback函数中，返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。

 <script>
    var script = document.createElement('script');
    script.type = 'text/javascript';
​
    // 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
    script.src = 'http://localhost:3000/login?user=admin&callback=handleCallback';
    document.head.appendChild(script);
​
    // 回调执行函数
    function handleCallback(res) {
        alert(JSON.stringify(res));
    }
 </script>

2. Vue axios实现：

this.$http = axios;
this.$http.jsonp('http://localhost:3000', {
    params: {},
    jsonp: 'handleCallback'
}).then((res) => {
    console.log(res); 
})

3. 通过JSONP来解决跨域

前端用JSONP方式去发请求（jsonp不是ajax请求）

后端写代码(CORS)在响应中添加必要的响应头，让响应回来之后浏览器不报错

本地服务器没有处理跨域: 没有响应 access-control-allow-origin 头

这是比较早的解决方案，我们的script标签的src还是img标签的src，或者说link标签的href他们没有被同源策略所限制。它就是通过通过 script 标签加载并执行其他的域的事件之类。

4.devServer: { // ... 省略 // 代理配置

  devServer: {
    // ... 省略
    // 代理配置
    proxy: {
        // 如果请求地址以/api打头,就出触发代理机制
        // http://localhost:9588/api/login -> http://localhost:3000/api/login
        '/api': {
          target: 'http://localhost:3000' // 我们要代理的真实接口地址
        }
      }
    }
  }
}