簡單請求

• 若滿足所有下述條件，則該請求可視為“簡單請求”：

• 使用下列方法之一：

• 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(); }

總結

以上是生活随笔為你收集整理的node --- [跨域] 预检请求的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。