OPTIONS请求调优

最新推荐文章于 2024-10-07 09:56:44 发布

[暂停使用]日行一善

最新推荐文章于 2024-10-07 09:56:44 发布

阅读量1.1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_39571197/article/details/92071193

版权

前端专栏收录该内容

100 篇文章 0 订阅

订阅专栏

# 触发条件

- 必须，跨域

- 必须，符合预检请求

# 优化方案

- 前提，浏览器需关闭disabled cache，https://my.oschina.net/mobinchao/blog/908834

- 原理，Access-Control-Max-Age

# demo

const http = require('http');
http.createServer(function (req, res) {
	res.end(`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn">发送请求</button>
<script>
	btn.onclick = function () {
		const xhr = new XMLHttpRequest();
		xhr.open('get', '//localhost:8001');
		xhr.setRequestHeader('X-SUPER-TOKEN', Math.random().toString(32));
		xhr.onreadystatechange = function () {
			if (xhr.readyState !== 4 || xhr.status !== 200) return;
			console.log(xhr);
		}
		xhr.send()
	}
</script>
</body>
</html>
`)
}).listen(8000);
http.createServer(function (req, res) {
	if (req.method === 'OPTIONS') {
		res.setHeader('Access-Control-Allow-Origin', '*');
		res.setHeader('Access-Control-Allow-Methods', '*');
		res.setHeader('Access-Control-Allow-Headers', 'X-SUPER-TOKEN');
		res.setHeader('Access-Control-Max-Age', 86400);
		res.end();
		return
	}

	res.end('123')
}).listen(8001);