简单请求
-
若满足所有下述条件，则该请求可视为“简单请求”：
-
使用下列方法之一：
-
GET
-
HEAD
-
POST
-
Content-Type: (仅当POST方法的Content-Type值等于下列之一才算做简单需求)
-
text/plain
-
multipart/form-data
-
application/x-www-form-urlencoded
预检会出现的问题
- 见如下代码:
// index.html
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>(async () => {axios.defaults.baseURL = 'http://localhost:3000';// const res = await axios.get('/users');// 跨域const res = await axios.get('users', {headers: {'X-Token': 'Marron'}})console.log(res.data);})()
</script>
// http.js
const http = require('http');
const fs = require('fs');http.createServer((req, res) => {const { method, url } = req;if (method === "GET" && url === '/') {fs.readFile('./index.html', (err, data) => {res.setHeader("Content-Type", "text/html");res.end(data);})} else if (method === "GET" && url === '/users') {res.setHeader("Content-Type", "text/json");res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500');res.end(JSON.stringify({ name: '奇怪的栗子', age: 18 }));}}).listen(3000, () => {console.log('[server] Server is running at http://localhost:3000');})
- 说明
1.在vscode中使用live server打开后的域是5500端口(我的默认是5500,你的有可能是8080)
2.请求的数据在3000端口,因此需要使用 axios.defaults.baseURL = ‘http://localhost:3000’
3.res.setHeader(‘Access-Control-Allow-Origin’, ‘http://127.0.0.1:5500’),表示允许来自127.0.0.1:5500域的请求
4.当代码运行时,会发现如下问题
- 问题:
- 请求会出现pedding.
- 原因如下
当出现预检请求时,http会先发送一个OPTIONS请求,而http.js中无OPTIONS的路由处理,因此出现了pedding
- 解决办法
- 添加OPTIONS的处理路由
else if (method === "OPTIONS" && url === "/users") {res.writeHead(200, {"Access-Control-Allow-Origin": "http://127.0.0.1:5500","Access-Control-Allow-Headers": "X-Token,Content-Type",});res.end();
}
