跨域请求问题以及解决方案

cors

简单请求，跨域请求解决方案CORS

jsonp实现

封装函数之后运行实现最终形式  <script src='https://xxx.xxx.xx?key=value&callback=xxx'><script>缺点需要服务器支持而且只支持 GET 请求

Websocket

就是在建立连接之后，server 与 client 都能主动向对方发送或接收数据。

什么是“跨源”

跨源，源是什么？浏览器的同源策略什么是同源？协议，域名，端口都相同就是同源干巴巴的，能不能举个栗子？栗子:)，有的有的：const url = 'https://www.google.com:3000'复制代码比如上面的这个 URL，协议是：https，域名是 www.google.com，端口是 3000。

解决方法JSONP

利用了 <script> 标签的 src 属性没有跨域限制的漏洞让我们可以得到从其他来源动态产生的 JSON 数据。

请求处理，添加access-control-allo...字段 值是请求源或*

检查是否有access-contro-all字段没有就是跨域不允许，报错

源是当前域

其他

一次跨域请求

跨域问题解决方案jsonp

添加origin表示请求来自哪个源

ajax因为同源出现问题

✘ Access to XMLHttpRequest at 'xxx' from origin 'xxx' has been blofont color=\"#ff3333\

没有同源策略的问题

Cookie劫持，被恶意网站窃取数据更容易受到 XSS，CSRF 攻击无法隔离潜在恶意文件

CORS

因为我们可能经常需要发起一个 跨域 HTTP 请求只不过被浏览器给拦截了，因为不安全在一个域名下发另一个域名的请求服务器允许了不就安全了，这就是 CORS 实现的原理：使用额外的 HTTP 头来告诉浏览器，让运行在某一个 origin 上的 Web 应用允许访问来自不同源服务器上的指定的资源。

PostMessage

发布-订阅模式，在这里，一个窗口发送消息，另一个窗口接受消息，之所以说类似发布-订阅模式，而不是观察者模式，是因为这里两个窗口间没有直接通信，而是通过浏览器这个第三方平台。

浏览器

跨源问题

不同源了会怎么样？会有很多限制，比如：Cookie，LocalStorage，IndexDB 等存储性内容无法读取DOM 节点无法访问Ajax 请求发出去了，但是响应被浏览器拦截了

缺点

缺点是兼容性上较 JSONP 差

原理

CORS 需要浏览器和服务器同时支持整个 CORS 的通信过程，都是浏览器自动完成。浏览器一旦发现请求是一个跨域请求，首先会判断请求的类型，如果是简单请求，会在请求头中增加一个 Origin 字段，表示这次请求是来自哪一个源响应头中会包含一个叫 Access-Control-Allow-Origin 的字段，它的值要么包含由 Origin 首部字段所指明的域名，要么是一个 \"*\"，没有响应头该字段浏览器就会报错表示不支持跨域

Nginx 反向代理

font color=\"#ff6666\

非简单请求

非简单请求，会在正式通信之前，发送一个预检请求（preflight），目的在于询问服务器，当前网页所在的域名是否在服务器的许可名单之中很多使用 OPTION 方法发起的请求，它其实就是一个预检请求不是预检请求：font color=\"#ff3333\

不同源服务器