第72篇 跨域的简略介绍
1.跨域的相关概念
1.1 什么是跨域
同源战略是由 Netscape 提出的闻名安全战略，是浏览器最中心、根本的安全功用，它约束了一个源（origin）中加载文本或许脚本与来自其他源（origin）中资源的交互办法，所谓的同源便是指协议、域名、端口相同。
当浏览器履行一个脚本时会查看是否同源，只需同源的脚本才会履行，假如不同源即为跨域。
域名组成：
1.2 为什么会呈现跨域
浏览器的同源战略，出于防备跨站脚本的进犯，制止客户端脚本（如 JavaScript）对不同域的服务进行跨站调用（一般指运用 XMLHttpRequest 恳求）。
1.3 浏览器的同源战略：Same-Origin Policy
- 没有同源战略的损害
避免恶行恳求
事例解说：
假设有一个黑客叫做小黑，他从网上抓取了一堆美女图做了一个网站，每日拜访量爆表。
为了保护网站运转，小黑挂了一张收款码，觉得网站不错的能够恰当赞助一点，但是无法伸手党太多，小黑的网站捉襟见肘。
所以他十分气愤的在网页中写了一段js代码，运用ajax向淘宝建议登陆恳求，由于许多数人都拜访过淘宝，所以电脑中存有淘宝的cookie，不需求输入账号密码直接就主动登录了，然后小黑在ajax回调函数中解析了淘宝回来的数据，得到了许多人的隐私信息，易手一卖，小黑的网站总算盈余了。
假如跨域也能够发送AJAX恳求的话，小黑就真的获取到了用户的隐私并成功获利了！！！
1.4 跨域有哪些约束
- Cookie、LocalStorage 和 IndexDB 无法读取。
- DOM 无法取得。：垂钓网站
- AJAX 恳求不能发送。
1.5 Ajax恳求过程：
（1）创立XMLHttpRequest 方针。
（2）运用open办法设置恳求的参数。open(method, url, 是否异步)。
（3）发送恳求。
（4）注册事情。 注册onreadystatechange事情，状况改动时就会调用。
（5）获取回来的数据，更新UI。
2.JSONP（JSON with Padding）
2.1 概念
原理便是运用了 script 标签不受同源战略的约束，在页面中动态插入了 script，script 标签的 src 特点便是后端 api 接口的地址，而且以 get 的办法将前端回调处理函数称号告知后端，后端在呼应恳求时会将回调返还，而且将数据以参数的方法传递回去。
2.2 中心代码
前端：
var script = document.createElement('script');
script.src = 'http://127.0.0.1:2333/jsonpHandler?callback=_callback';
document.body.appendChild(script);
var _callback = function(obj) {
for(key in obj) {
console.log('key: ' + key +' value: ' + obj[key]);
}
}
后端：
[HttpGet]
[Route("jsonpForVue")]
public void GetjsonpForVue(string callback)
{
TokenModelJwt tokenModelJwt=new TokenModelJwt(){
Role="admin",
Uid=1,
Work="dsdf"
};
//string call = "({" + response + "})";
string response = string.Format("\"name\":\"{0}\"", "zhagnsan");
var modlestr = JsonConvert.SerializeObject(tokenModelJwt);
string call = callback + "(" + modlestr + ")";
Response.WriteAsync(call);
}
2.3 好坏
劣：
- 这种办法只能发生get恳求；
- 确认jsonp的恳求是否失利并不简略，大多数结构的完成都是结合超时时刻来断定；
- 不太安全，或许也会遭到进犯；
优：
- 很简略
- 旧式浏览器悉数支撑，服务器改造十分小
3 Proxy署理
3.1 概念
- vue-cli的proxyTable用的是http-proxy-middleware中间件
- create-react-app用的是webpack-dev-server内部也是用的http-proxy-middleware
- http-proxy-middleware内部用的http-proxy
跨域是浏览器制止的，服务端并不制止跨域
所以浏览器能够发给自己的服务端然后，由自己的服务端再转发给要跨域的服务端，做一层署理。
3.2 中心代码
前端：
proxy: {
// 装备多个署理
"/api": {
target: "http://localhost:5000",//这儿改成你自己的后端api端口地址，记住每次修正，都需求从头build
//target: "http://localhost:58427",
//target: "http://api.douban.com",
ws: true,
changeOrigin: true,
pathRewrite: {
// 途径重写，
"^/apb": "" // 替换target中的恳求地址
}
}
3.3 好坏
缺陷：不能用在出产环境，只能在开发环境；
长处：dev环境装备很简略，支撑多个域名；
4 CORS，全称：Cross-Origin Resource Sharing（跨域资源共享）
4.1 概念
CORS是一种答应当时域（origin）的资源被其他域（origin）的脚本恳求拜访的机制。
当运用 XMLHttpRequest 发送恳求时，浏览器假如发现违反了同源战略就会主动加上一个恳求头 origin，后端在接遭到恳求后确认呼应后会在 Response Headers 中参加一个特点 Access-Control-Allow-Origin，值便是建议恳求的源地址(http://127.0.0.1:8888)，浏览器得到呼应会进行判别 Access-Control-Allow-Origin 的值是否和当时的地址相同，只需匹配成功后才进行呼应处理。
简略恳求
- GET
- HEAD
- POST
- 条件 2：Content-Type 的值仅限于下列三者之一：
- text/plain
- multipart/form-data
- application/x-www-form-urlencoded
杂乱恳求
4.2 中心代码
后端装备
4.3 好坏
缺陷：
- 部分老的浏览器不支撑
长处：
- 支撑一切 Http 谓词恳求
- 不必留意接口规矩
- 可用在出产环境
5 Nginx
概念：nginx处理跨域 是运用其反向署理的才干
5.1 跨域原理
Brower =》 host =》 nginx =》 方针地址服务器数据 =》 nginx =》 Brower
也便是说，nginx并不是经过监听brower的恳求。而是作为一个服务器，接纳外部对本机的恳求。所所以先经过host，让恳求指向本机，才会经过nginx。才干进行转发。
- 首要，直接在浏览器地址栏中，输入某接口地址。是不会发生跨域问题的。
- 只需当在某域名的页面中，由该页面建议的接口恳求。才或许会跨域。
- nginx就相似于这个浏览器地址栏，它接纳到外部对它的恳求（ 留意，nginx只会接纳他人对它的恳求，而不会阻拦浏览器的恳求 ），再相似浏览器地址栏相同去恳求某个接口。最终将恳求到的内容回来回去
5.2 中心代码
server {
listen 1005;
server_name localhost;
location / {
root nuxt\Blog.Admin\dist;
index index.html index.htm;
}
location /api {
rewrite ^.+apb/?(.*)$ /$1 break;
include uwsgi_params;
proxy_pass http://localhost:1004; #// 这是 netcore 端口
}
error_page 404 /404.html;
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
5.3 好坏
缺陷：
- 移植灵活性 低、每套环境装备或许均不相同
长处：
- 对独立性强的小项目，运用nginx则能够下降你的开发本钱，快速发开快速上线
6 Socket
WebSocket是一种通讯协议，运用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源方针，只需服务器支撑，就能够经过它进行跨源通讯。
中心代码：
var ws = new WebSocket('wss://echo.websocket.org'); //创立WebSocket的方针。参数能够是 ws 或 wss，后者表明加密。
//把恳求发出去
ws.onopen = function (evt) {
console.log('Connection open ...');
ws.send('Hello WebSockets!');
};
//对方发消息过来时，我接纳
ws.onmessage = function (evt) {
console.log('Received Message: ', evt.data);
ws.close();
};
//封闭衔接
ws.onclose = function (evt) {
console.log('Connection closed.');
};
7 其他
