/
app.js
183 lines (149 loc) · 5.65 KB
/
app.js
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
// 1. 引入express
const { response } = require('express');
const express = require('express');
//2. 创建应用对象
const app = express();
// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//设置响应体
response.send("HELLO AJAX - 1");
});
// app.post('/server',(request, response)=>{
//all可以接收任意类型的请求,(包括自定义)
app.all('/server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//遇到自定义响应头时可以设置
response.setHeader('Access-Control-Allow-Headers', '*');
//设置响应体
response.send("HELLO AJAX POST");
});
app.all('/json-server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//遇到自定义响应头时可以设置
response.setHeader('Access-Control-Allow-Headers', '*');
//响应一个数据
const data = {
name: 'sliber'
};
//对对象进行字符串转化
let str = JSON.stringify(data);
//设置响应体
// response.send("HELLO AJAX JSON");
response.send(str);
});
//针对 IE 缓存
app.get('/ie', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//设置响应体
response.send("HELLO IE - 5");
});
//针对 请求超时:作延时响应:2s
app.get('/delay', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
setTimeout(() => {
//设置响应体
response.send("延时响应");
}, 3000)
});
//针对 jQuery 服务
app.all('/jquery-server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Headers', '*');
const data = {name: 'Nliverd的AJAX学习笔记'};
// response.send("Hello jQuery AJAX");
response.send(JSON.stringify(data));
});
//针对 axios 服务
app.all('/axios-server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Headers', '*');
const data = {name: 'Nliverd的AJAX学习笔记'};
// response.send("Hello jQuery AJAX");
response.send(JSON.stringify(data));
});
//针对 fetch 服务
app.all('/fetch-server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Headers', '*');
const data = {name: 'Nliverd的AJAX学习笔记'};
// response.send("Hello jQuery AJAX");
response.send(JSON.stringify(data));
});
//针对 jsonp 服务
app.all('/jsonp-server', (request, response) =>{
// response.send('HELLO JSONP-server');
// script标签最好还是返回js代码,要的是一段函数的调用
// response.send('console.log("hello jsonp")');
const data = {
name: 'Nliver的学习笔记-1'
};
//将数据转化为字符串
let str = JSON.stringify(data);
//返回结果形式 是一个函数调用,而函数的实参就是我们想给客户端返回的结果数据
response.end(`handle(${str})`);
});
//用户名检测是否存在
app.all('/check-username', (request, response) =>{
// response.send('console.log("hello jsonp")');
const data = {
exist: 1,
msg: '用户名已经存在'
};
//将数据转化为字符串
let str = JSON.stringify(data);
//返回结果形式 是一个函数调用,而函数的实参就是我们想给客户端返回的结果数据
response.end(`handle(${str})`);
});
//jQuery服务中的jsonp
app.all('/jquery-jsonp-server', (request, response) =>{
// response.send('console.log("hello jsonp")');
const data = {
name: 'Nliver',
city: ['北京', '上海', '深圳']
};
//将数据转化为字符串
let str = JSON.stringify(data);
//接收 callback 参数
let cb = request.query.callback;
//返回结果
response.end(`${cb}(${str})`);
});
app.all('/cors-server', (request, response)=>{
// 设置响应头
// 指定允许其他域名访问
// 一般用法(*,指定域,动态设置),3是因为*不允许携带认证头和cookies
// response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");
/**
* 如何设置多个请求头
* 先判断,再设置
* if( req.headers.origin == 'https://www.google.com' || req.headers.origin == 'https://www.baidu.com' ){
* res.header("Access-Control-Allow-Origin", req.headers.origin);
* }
*/
response.setHeader("Access-Control-Allow-Origin", "*");
// 允许的请求头字段
response.setHeader("Access-Control-Allow-Headers", '*');
// 允许的请求类型
// 'Access-Control-Allow-Methods:GET,POST,PUT,POST'
response.setHeader("Access-Control-Allow-Method", '*');
//是否允许后续请求携带认证信息(cookies),该值只能是true,否则不返回
response.setHeader("Access-Control-Allow-Credentials:true", 'true');
//预检结果缓存时间,也就是上面说到的缓存啦
response.setHeader("Access-Control-Max-Age", '1800');
response.send('hello CORS');
})
//4. 监听端口启动服务
app.listen(8000, () => {
console.log("服务已经启动, 8000端口监听中....");
})