HTTP: 前端拾遗--同源策略和跨域处理

什么是同源策略

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

JSONP

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

• JSONP(JSON with Padding（填充）)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。

1、jsonp没有使用XMLHttpRequest对象。 2、jsonp只是在一种跨域的技巧。 3、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,值就是发起请求的源地

CORS的具体流程（了解）

1. 浏览器发送跨域请求
2. 服务器端收到一个跨域请求后，在响应头中添加Access-Control-Allow-Origin Header资源权限配置。发送响应
3. 浏览器收到响应后，查看是否设置了header('Access-Control-Allow-Origin:请求源域名或者*');
4. 如果当前域已经得到授权，则将结果返回给JavaScript。否则浏览器忽略此次响应。

结论： 5. 跨域行为是浏览器行为，响应是回来了的, 只是浏览器安全机制做了限制, 对于跨域响应内容进行了忽略。 6. 服务器与服务器之间是不存在跨域的问题的

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

jsonp与cors的对比

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

使用Nginx

• 方便的跨域方案Nginx

nginx是一款极其强大的web服务器，其优点就是轻量级、启动快、高并发。

• 现在的新项目中nginx几乎是首选，我们用node或者java开发的服务通常都需要经过nginx的反向代理。

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

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

• iframe

PostMessage（iframe 相关的）

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

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

参考

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

外链

• 2020春季中高级前端面试记 | 渐进增强题目甄选(上篇)
• 面筋系列-http-同源策略和跨域处理
• 面筋系列-http-前端缓存
• 面筋系列-javascript-ES6基础
• 面筋系列-javascript-手写题和基础
• 面筋系列-react-setSate同步异步问题