浏览器相关

问题：同源策略

同源策略

同源请求、跨域请求。

同源策略（Same origin policy），它是由Netscape网景公司提出的一个著名的安全策略，浏览器都遵守该策略。

同源：协议、域名、端口号必须完全相同
跨域：违背同源策略就是跨域，浏览器会丢弃非同源的响应数据。

也就是说，服务端有返回数据，浏览器也接收到了响应数据，但浏览器发现我们请求的是一个非同源的数据，浏览器再将其响应报文丢弃掉。

同源策略又分为以下两种：

DOM 同源策略：禁止对不同源的页面 DOM 进行操作。这里主要场景是 iframe 跨域的情况，不同域名的 iframe 是限制互相访问的。
XMLHttpRequest 同源策略：禁止使用 XHR 对象向不同源的服务器地址发起 HTTP 请求。无需再浏览器收到请求后拦截非同源数据，通过 XHR 发送的不同源请求可直接被拦截。

为什么要有跨域限制：

如果没有 DOM 同源策略，也就是说不同域的 iframe 之间可以相互访问，那么黑客可以这样进行攻击：

做一个假网站，里面用 iframe 嵌套一个银行网站 http://mybank.com。
把 iframe 宽高啥的调整到页面全部，这样用户进来除了域名，别的部分和银行的网站没有任何差别。
这时如果用户输入账号密码，我们的主网站可以跨域访问到 http://mybank.com 的 dom 节点，就可以拿到用户的账户密码了。

如果没有 XMLHttpRequest 同源策略，那么黑客可以进行 CSRF（跨站请求伪造）攻击：

用户登录了自己的银行页面 http://mybank.com，http://mybank.com 向用户的 cookie 中添加用户标识。
用户浏览了恶意页面 http://evil.com，执行了页面中的恶意 AJAX 请求代码。
http://evil.com 向 http://mybank.com 发起 AJAX HTTP 请求，请求会默认把 http://mybank.com 对应 cookie 也同时发送过去。
银行页面从发送的 cookie 中提取用户标识，验证用户无误，response 中返回请求数据。此时数据就泄露了。
而且由于 Ajax 在后台执行，用户无法感知这一过程。

https://juejin.cn/post/6844903681683357710

解决跨域问题：

解决跨域问题有两种方式：民间的 JSONP + 官方的 CORS（跨域资源共享）。

问题：什么是 JSONP

JSONP是 JSON with Padding 的略称，JSONP 是程序员提出的一种跨域解决方案。

在网页有一些标签天生具有跨域能力，比如：img、 link、 iframe、 script。这些标签发出的请求不会

JSONP 通过创建 script 标签，利用 src 属性进行跨域，来发送请求。仅支持 get 请求。

缺点：

代码结构改变，接受到响应数据后的处理代码，要全部放在回调函数中。
控制反转。调用回调函数，处理返回数据和后续逻辑的契机不在浏览器的js代码中，而是交给了服务器。
后端协商，需要和后端进行协商，确保服务器会正确调用回调函数，并携带正确的格式。JSONP 不易进行错误检查。

问题：什么是 CORS

CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方案。CORS 需要浏览器和服务器同时支持，支持 get 和 post 请求。

CORS 背后的基本思想，就是使用自定义的 HTTP 头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。对于开发者来说，CORS 通信与同源的 AJAX 通信没有差别，代码完全一样。浏览器一旦发现 AJAX 请求跨源，就会自动添加一些附加的头信息：

通过设置一个响应头来告诉浏览器，该请求允许跨域，而浏览器会对头部信息匹配，如果匹配成功则正常返回信息，浏览器收到该响应以后就会对响应放行，而不会拦截。

服务端：

all.get("/testAJAX" , function (req , res) {
    //通过res设置响应头，允许跨域请求
    //res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000");
    res.set("Access-Control-Allow-Origin","*");
    res.send("testAJAX 返回的响应");
});