跨域问题

一、首先需要了解为什么会出现跨域问题

1. 同源策略。 针对浏览器功能，即两个页面具有相同的协议，主机名（包括主域名，子域名）和端口号相同。反之，则称为非同源。同源策略可以保证浏览器的安全性和功能的正常进行。
2. 跨域 因此，如果不满足同源策略，则会出现跨域问题。跨域可以分为以下三种： 第一种是协议不同，http和https不同；
   第二种是主域名不同，即www.baidu.com和www.google.com不同；
   第三种是主域名相同，即www.baidu.com 和 blog.baidu.com 不同
   第四种是端口不同，即www.baidu.com:8080 和www.baidu.com:2000不同。

一定出现这些问题，即会受到非同源限制：无法读取非同源网页的cookie，localStorage 和 indexedDB；无法接触非同源网页的DOM；无法向非同源网页发送AJAX请求。

二、跨域问题怎么解决

当前项目流行趋势是前后端分离，那么毋庸置疑就会出现跨域问题。如何解决这样的跨域问题？
1.使用document.domain（针对主域名相同，子域名不同）
浏览器跨域通过document.domain来检查两个页面是否同源。 同样，其可以设置我们的页面主域名。

2.使用跨文档通信API：window.postMessage()

其可以用于解决以下问题：
1） 页面和其打开的新窗口的数据传递
2） 多窗口之间的消息传递
3） 页面与其嵌套的iframe消息传递 4） 以上三个场景的跨域数据传递

3.使用jsonp方法
Jsonp是服务器与客户端之间跨源通信的方法。但是其只能支持get，不支持post。
核心思想：网页通过添加一个script元素，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。

4.使用CORS跨域资源分享 CORS是跨域AJAX请求的根本解决方法，其分为以下两种：

1. 普通的跨域资源请求：只需要服务端设置Access-Control-Allow-Origin
2. 带cookie的跨域请求：前后端设置 前端设置： 首先，需要用xhr.withCredentials判断是否带有cookie

后台只要设置允许其带cookie而且指定请求的相应页面即可。

前一部分内容中我们解释了什么是跨域，跨域问题如何解决，那么解决跨域问题的原理是怎么样的呢？

解决跨域问题跨域分为两种：

1. 设置浏览器允许浏览器跨域请求。
2. 前端跨域访问，本地服务器请求转发。 现在重点解释第2种方式。我们知道，前端发起请求（首先会访问我们的本地服务），我们的webpack会进行打包并进行代理转发，生成本地的一个服务（相当于一个中转），然后这个服务再会将我们的请求内容转发到目的服务器（后端）。即利用后端服务之间不会存在跨域的问题来解决。

Webpack启动本地服务的原理可以由以下内容步骤构成：
Node.js（打包）+express（启动服务）+http-proxy-middleware （设置代理进行转发）
参考博客：blog.csdn.net/qq_38128179… blog.csdn.net/wang8393059…