简单请求

• 若满足所有下述条件，则该请求可视为“简单请求”：

• 使用下列方法之一：

• 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.当代码运行时,会发现如下问题

• 问题:

1. 请求会出现pedding.
2. 原因如下
   
   当出现预检请求时,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();
}