/
index.ejs
179 lines (176 loc) · 5.62 KB
/
index.ejs
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTTP CORS demo</title>
</head>
<body>
<p>请打开 chrome 的 devtools 观看请求详情</p>
<ul>
</ul>
<script type="text/template" id="tmpl">
<h3><a href="#no{{index}}" id="no{{index}}">Demo No.{{index}} - {{desc}}</a></h3>
<p>请求地址：<span>{{url}}</span></p>
<p>请求方法：<span>{{method}}</span></p>
<p>请求额外头：<span>{{headers}}</span></p>
<p>是否上传文件：<span>{{upload}}</span></p>
<p>是否监听上传事件：<span>{{listenUpload}}</span></p>
<button onclick="{{callback}}()">start</button>
<p>结果：<span class="result" style="color:red"></span></p>
</script>
<script>
var tmpl = document.querySelector('#tmpl')
var ul = document.querySelector('ul')
document.cookie = 'testcookie=somevalue'
var apiBase = location.protocol + '//' + location.hostname + ':<%= serverPort %>'
var demosConfig = [
{
desc: '请求没有配置跨域头的接口：',
url: '/no-cors',
},
{
desc: '请求有配 Access-Control-Allow-Origin 响应头的接口，但是其值非 localhost',
url: '/api1',
},
{
desc: '请求有配正确的 Access-Control-Allow-Origin 响应头的接口',
url: '/api2',
},
{
desc: '请求上一个接口并且带有额外的请求头',
url: '/api2',
headers: {
'X-Custom-Header': 'Hello'
}
},
{
desc: '请求有正确配置 Access-Control-Allow-Headers 响应头的接口',
url: '/api3',
headers: {
'X-Custom-Header': 'Hello'
}
},
{
desc: '请求上一个接口，但是使用了PUT方法',
url: '/api3',
method: 'PUT',
},
{
desc: '请求有正确配置 Access-Control-Allow-Methods 响应头的接口',
url: '/api4',
method: 'PUT'
},
{
desc: '请求带上 cookie ,但是接口没有配置 Access-Control-Allow-Credentials',
url: '/api6',
withCredentials: true
},
{
desc: '请求配置有 Access-Control-Allow-Credentials 的接口，但是接口 Access-Control-Allow-Origin 为通配符',
url: '/api5',
withCredentials: true
},
{
desc: '请求有正确配置 Access-Control-Allow-Origin 和 Access-Control-Allow-Credentials 的接口',
url: '/api7',
withCredentials: true
},
{
desc: '上传文件到没有配置 options 请求的接口',
url: '/api2',
upload: true,
method: 'POST'
},
{
desc: '上传文件到没有配置 options 请求的接口，并且监听上传事件',
url: '/api2',
method: 'POST',
upload: true,
listenUpload: true
},
{
desc: '上传文件到有正确配置 options 请求的接口，并且监听上传事件',
url: '/api3',
method: 'POST',
upload: true,
listenUpload: true,
}
]
demosConfig.forEach(function(demo, index) {
var tmplText = tmpl.innerText
var callbackName = 'callback' + index
function startRequest() {
request(apiBase + demo.url, {
method: demo.method,
headers: demo.headers,
withCredentials: demo.withCredentials,
files: demo.files,
listenUpload: demo.listenUpload
}, function(err, data) {
if (err) {
wrapper.querySelector('.result').innerHTML = '失败了'
console.error(err)
} else {
wrapper.querySelector('.result').innerHTML = '成功了'
console.log(data)
}
})
}
window[callbackName] = function() {
if (demo.upload) {
var input = document.createElement('input')
input.setAttribute('type', 'file')
input.onchange = function() {
demo.files = input.files[0]
startRequest()
}
input.click()
} else {
startRequest()
}
}
tmplText = tmplText.replace(/{{index}}/g, index)
tmplText = tmplText.replace(/{{desc}}/g, demo.desc)
tmplText = tmplText.replace(/{{callback}}/g, callbackName)
tmplText = tmplText.replace(/{{url}}/g, demo.url)
tmplText = tmplText.replace(/{{method}}/g, demo.method || 'GET')
tmplText = tmplText.replace(/{{headers}}/g, JSON.stringify(demo.headers || {}))
tmplText = tmplText.replace(/{{upload}}/g, demo.upload || false)
tmplText = tmplText.replace(/{{listenUpload}}/g, demo.listenUpload || false)
var wrapper = document.createElement('li')
wrapper.innerHTML = tmplText
ul.appendChild(wrapper)
})
function request(url, options, callback) {
options = options || {}
options.method = options.method || 'GET'
options.headers = options.headers || {}
var xhr = new XMLHttpRequest()
var data = null
xhr.open(options.method, url)
for (var i in options.headers) {
xhr.setRequestHeader(i, options.headers[i])
}
xhr.onload = function() {
callback(null, xhr.responseText)
}
xhr.onerror = function(e) {
callback(e)
}
if (options.withCredentials) {
xhr.withCredentials = true
}
if (options.files) {
data = new FormData()
data.append('file', options.files, options.files.name)
}
if (options.listenUpload) {
xhr.upload.addEventListener('progress', function(e) {
console.log('uploading')
})
}
xhr.send(data)
}
</script>
</body>
</html>