把知识记在小本本上

将零散的知识点放在一个集中的地方,不断递归重构,形成一套为己所用的知识系统。

博客首页 | 小本本首页
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const http=require('http');

let allowOrigin={
'http://localhost': true,
'http://aaa.com': true,
'https://aaa.com': true,
}

http.createServer((req, res)=>{
let {origin}=req.headers;

if(allowOrigin[origin]){
res.setHeader('access-control-allow-origin', '*');
}

res.write('{"a": 12, "b": "Blue"}');
res.end();
}).listen(8080);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function (){
let oBtn=document.getElementById('btn1');

oBtn.onclick=function (){
let ajax=new XMLHttpRequest();

ajax.open('GET', 'http://localhost:8080/a', true);
ajax.send();

ajax.onreadystatechange=function (){
// readyState 0~4
// 0:初始化 1:已连接 2:已发送 3:响应头已经接收到 4:相应体已经接受
if(ajax.readyState==4){
if(ajax.status>=200 && ajax.status<300 || ajax.status==304){
alert('成功');
let json=JSON.parse(ajax.responseText);
console.log(json);
}else{
alert('失败');
}
}
};
};
};
</script>
</head>
<body>
<input type="button" value="请求" id="btn1">
</body>
</html>

ajax为什么不能跨域?

SOP:同源策略,你代码请求的资源应该和你在一个域名下,如果不是,浏览器会禁止这个请求。

ajax是被谁阻止住的?

不是服务器,是浏览器阻止的,这是浏览器的一种”自律”的行为。

服务器是一定会响应的,响应后如果不是同源,浏览器会把这个东西扔掉。

所以这个时候需要服务器返回数据的时候需要声明一下,声明我们是一家子(就是声明哪些人可以从我这里获取数据),如上代码。