跨域？如何解决？同源策略？

跨域:

当前页面中的某个接口，请求的地址和当前页面的地址中，协议、域名、端口号有一项不同就是发生了跨域请求

原因:

游览器为了保护网页的安全，同源协议策略，如果缺少了同源策略，游览器很容易受到XSS、CSRF等攻击

跨域报错如下:

 

跨域解决方案:

• JSONP（a、img）

使用script标签，利用其可以跨域请求资源，将回调函数作为参数拼接到url上。

后端收到请求后，调用该回调函数，并将数据作为参数返回

响应头返回文档类型应设为javascript

缺点是只支持GET请求，安全性差可能会遭受XSS攻击

JSONP和ajax都是向服务器端发送请求，但Ajax属于同源策略，JSONP属于非同源策略

• CORS

通过后端设置允许跨域实现

response.setHeader('Access-Control-Allow-Origin','*')；

response.setHeader('Access-Control-Allow-Origin','GET, PUT, OPTIONS, POST')

• node中间件，nginx反向代理

跨域限制时，游览器不能跨域访问服务器，node中间件，nginx反向代理，都是让请求发给代理服务器，静态页面和代理服务器是同源的，代理服务器再向后端服务器发送请求，同源限制对服务器不加限制

(中间件就是一种功能的封装方式，就是封装在程序中处理http请求的功能、Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器)

• • 代理服务器接受客户端请求，转发请求给后端服务器
  • 代理服务器接收来自后端的响应，转发给客户端

• postMessage

H5新增API，通过发送和接收API实现跨域通信，可用于解决：

　　页面和其打开的新窗口的数据传递

　　多窗口之间的信息传递

　　页面与嵌套的iframe消息传递

　　如上三个场景的跨域数据传递

• webSocket

websocket是HTML5的一个持久化协议，实现了游览器和服务器之间的全双工通行信，也是解决跨域请求的一种方案

websocket和HTTP都是应用层协议，都基于TCP协议

webscoket是一种双向通信协议，在建立连接（此时需要借助HTTP协议之后就与HTTP无关了）后

webscoket的客户端和服务器端都能主动向对方发送或接受数据

• window.name + iframe
• location.hash + iframe
• document.domain +iframe

跨域场景:

前后端分离开发，请求第三方接口

同源策略:

• 定义

当两个url的协议、域名、端口号相同时这两个url就是同源的，同源的两个url间可以进行相互资源访问和操作DOM

不同源的url之间进行资源访问就会受到游览器的安全策略限制，这就是同源策略

• 体现

DOM：同源策略限制不同源站点之间JavaScript脚本对当前DOM对象的读写操作

Web数据：同源策略限制不同源站点访问当前站点的cookie、sessionStorage、localStorage

网络：同源策略限制通过XMLHTTPRequest等方式将当前站点的内容发送至不同源站点

 

 

 

总结:

• CORS支持所有类型的HTTP请求，是跨域请求的根本解决方案
• JSONP只支持GET请求，优势在于支持老式游览器和不支持CORS的网站请求数据
• Node中间件和nginx，都主要通过同源策略对游览器不加限制的原理

参考:

九种跨域实现

同源策略