面筋系列-http-同源策略和跨域处理

时间 2020-03-19

原文原文链接

什么是同源策略

协议(http/https),端口(80/8080),域名(baidu/google)要相同才行
document.domain

JSONP

jsonp-script标签的src属性不受同源策略限制，用此方式对非同源服务器请求资源，返回的JS代码会调用指定的函数，携带的参数就是所需的数据，这样就完成了跨域请求。javascript

JSONP(JSON with Padding（填充）)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。一、jsonp没有使用XMLHttpRequest对象。二、jsonp只是在一种跨域的技巧。三、jsonp只支持Get方式

let scriptDom = document.createElement("script");
scriptDom.src="请求地址?callback=函数名";
document.body.appendChild(scriptDom);
复制代码

CORS

CORS -Cross-Origin Resource

Sharing(跨域资源共享)是一种容许当前域（origin）的资源（好比html/js/web service）被其余域（origin）的脚本请求访问的机制。当使用XMLHttpRequest发送请求时，浏览器若是发现违反了同源策略就会自动加上一个请求头:origin,后端在接受到请求后肯定响应后会在Response Headers中加入一个属性:Access-Control-Allow-Origin,值就是发起请求的源地html

CORS的具体流程（了解）

浏览器发送跨域请求
服务器端收到一个跨域请求后，在响应头中添加Access-Control-Allow-Origin Header资源权限配置。发送响应
浏览器收到响应后，查看是否设置了header('Access-Control-Allow-Origin:请求源域名或者*');
若是当前域已经获得受权，则将结果返回给JavaScript。不然浏览器忽略这次响应。结论：
跨域行为是浏览器行为，响应是回来了的, 只是浏览器安全机制作了限制, 对于跨域响应内容进行了忽略。
服务器与服务器之间是不存在跨域的问题的

》服务器处理跨域：在先后端分离的项目中能够借助服务器实现跨域，具体作法是：前端向本地服务器发送请求，本地服务器代替前端再向api服务器接口发送请求进行服务器间通讯，本地服务器其实就是个中转站的角色，再将响应的数据返回给前端前端

jsonp与cors的对比

jsonp兼容性好，老版本浏览器也支持，可是jsonp仅支持get请求，发送的数据量有限。使用麻烦
cors须要浏览器支持cors功能才行。可是使用简单，只要服务端设置容许跨域，对于客户端来讲，跟普通的get、post请求并无什么区别。
跨域的安全性问题：由于跨域是须要服务端配合控制的，也就是说不论jsonp仍是cors，若是没有服务端的容许，浏览器是无法作到跨域的。

使用Nginx

方便的跨域方案Nginx nginx是一款极其强大的web服务器，其优势就是轻量级、启动快、高并发。html5
如今的新项目中nginx几乎是首选，咱们用node或者java开发的服务一般都须要通过nginx的反向代理。java

反向代理的原理很简单，即全部客户端的请求都必须先通过nginx的处理，nginx做为代理服务器再讲请求转发给node或者java服务，这样就规避了同源策略。node

还有哪些跨域的状况会遇到？

iframe

PostMessage（iframe 相关的）

html5 提供的 PostMessage(data:须要传递的数据,origin: 协议+主机+端口号【+URL】)react

1.页面和其打开的新窗口的数据传递
2.多窗口之间消息传递
3.页面与嵌套的iframe消息传递
4.上面三个问题的跨域数据传递
复制代码

参考

www.cnblogs.com/why210/p/95…