为什么会出现跨域
安全
浏览器同源策略
同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
cookie
CSRF攻击
XSS攻击
跨域在chrome浏览器下的表现
服务器跨域设置
服务器可以设置只允许某个域名下的程序访问
Cross Origin Resource Share (CORS)
CORS是一个跨域资源共享方案，为了解决跨域问题，通过增加一系列请求头和响应头，规范安全地进行跨站数据传输
请求头主要包括
Origin Origin头在跨域请求或预先请求中，标明发起跨域请求的源域名。
响应头主要包括
Access-Control-Allow-Origin Access-Control-Allow-Origin头中携带了服务器端验证后的允许的跨域请求域名，可以是一个具体的域名或是一个*（表示任意域名）。
跨域解决方案
- JSONP
- 空iframe加form
- CORS跨域资源共享（Cross-origin resource sharing）
- nginx代理
fetch 和 xhr
withCredentials
HTTP 请求方式有许多种，有些请求会触发 CORS 预检请求。“需预检的请求”会使用 OPTIONS 方法发起一个预检请求到服务器，以获知服务器是否允许该实际请求。
对于跨域请求浏览器一般不会发送身份凭证信息。如果要发送凭证信息，需要设置 XMLHttpRequest 的 withCredentials 属性为 true：withCredentials: true。此时要求服务器的响应信息中携带 Access-Control-Allow-Credentials: true，否则响应内容将不会返回。
对于携带身份凭证的请求，服务器不得设置 Access-Control-Allow-Origin 的值为“*”。因为请求头携带了 Cookie 信息。要将 Access-Control-Allow-Origin 的值设置为
另外，响应头中也携带了 Set-Cookie 字段，尝试对 Cookie 进行修改。如果操作失败，将会抛出异常。
————————————————
版权声明：本文为CSDN博主「__Amy」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/sansan_7957/article/details/79714486
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/withCredentials
webpack 代理设置
参考：
https://segmentfault.com/a/1190000017867312
https://segmentfault.com/a/1190000015597029
