简单请求

若满足所有下述条件，则该请求可视为“简单请求”：
使用下列方法之一：
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 --- [跨域] 预检请求相关推荐

options请求（跨域预检）
概述 options 请求就是预检请求,可用于检测服务器允许的 http 方法.当发起跨域请求时,由于安全原因,触发一定条件时浏览器会在正式请求之前自动先发起 OPTIONS 请求,即 CORS 预检 ...
浏览器预检请求返回400 has been blocked by CORS policy: Response to preflight request doesn’t pass access cont
这个问题也是很过分头一次遇到,原因是谷歌浏览器在有跨域(CORS)请求时,会先发送一个preflight(预检)请求,之后才会发送fetch请求. CORS:跨源资源共享 (CORS)(或通俗地译为跨 ...
Chrome98和Chrome101的跨域变化，httpOPTIONS预检请求，私有网络访问限制
在Chrome94更新时,发现访问本地服务器的时候谷歌浏览器限制了访问本地资源当时通过一个浏览器设置进行了处理.但是治标不治本,98版本更新后又出现了CORS跨域问题.查询了一下资料: Chrome ...
跨域请求避免OPTIONS请求（预检请求）
有时候前后端分离域名不一致,会造成跨域请求而跨域请求有时候会自动发起两次请求,第一次为预检请求,即OPTIONS请求一般来说使用 application/json 的 post 请求是必然会带入O ...
node 跨域请求设置
http.createServer((req,res)=>{ //设置允许跨域的域名,代表允许任意域名跨域 res.setHeader("Access-Control-Allow-Or ...
从前后端的角度分析options预检请求——打破前后端联调的理解障碍
文章目录 1.从前端的角度看options--post请求之前一定会有options请求?信口雌黄! 2.从后端的角度看options--post请求之前一定会有options请求?胡说八道! 1.从 ...
Springboot跨域 ajax jsonp请求
SpringBoot配置: <dependency><groupId>org.springframework.boot</groupId><artifactI ...
记录我开发工作中遇到HTTP跨域和OPTION请求的一个坑
我通过这篇文章把今天工作中遇到的HTTP跨域和OPTION请求的一个坑记录下来. 场景是我需要在部署在域名a的Web应用里用JavaScript去消费一个部署在域名b的服务器上的服务.域名b上的服务也 ...
对CORS OPTIONS预检请求的一些思考
前后端分离模大势所趋,跨域问题更是老生常谈. <程序员应对浏览器同源策略的姿势>一文提到三种跨域请求方案,重点讲述了w3c和浏览器厂商推出的CORS规范. 同源策略所谓同源是指域名.协 ...

node --- [跨域] 预检请求

简单请求

预检会出现的问题

node --- [跨域] 预检请求相关推荐

最新文章

热门文章