前端——CORS跨域请求的限制与解决

myzbx 2025-06-15 18:05 16 浏览

node 中设置允许跨域

如果需要设置多个域允许跨域，可以根据 req 请求的地址进行写入不同的 header；

const http = require('http')
http.createServer(function(req, res) {
  res.writeHead(200, {
    // 'Access-Control-Allow-Origin': '*' // * 代表允许所有的请求
    'Access-Control-Allow-Origin': 'http://127.0.0.1:8888' // 可以指定某个地址请求
  })
  res.end('123')
}).listen(8887)

#通过 JSONP 来进行跨域

<script src="http://localhost:8887/"></script>
// 8887 端口可以返回执行 js 代码
const http = require('http')
http.createServer(function(req, res) {
  res.end('123')
}).listen(8887)

#浏览器跨域请求的其他限制

#cors 预请求

预请求的 Request Method 为 OPTIONS；首先客户端发送预请求给服务器端去验证，然后再发送真正的请求。

#允许方法

GET
HEAD
POST

其他方法需要通过预请求验证过之后才能进行发送请求。

#允许 Content-Type

text/plain
multipart/form-data
application/x-www-form-urlencoded

其他 Content-Type 需要通过预请求验证过之后才能进行发送请求。

#其他限制

请求头限制：https://fetch.spec.whatwg.org/#cors-safelisted-request-header
XMLHttpRequestUpload 对象均没有注册任何事件监听器
请求中没有使用 ReadableStream 对象

如何设置自定义请求头在请求中发送，服务器端识别并返回：

// 客户端
<script>
  fetch('http://localhost:8887/', {
    headers: {
      'X-Test-Cors': '123'
    }
  })
</script>
// 服务端
const http = require('http')
http.createServer(function(req, res) {
  res.writeHead(200, {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Headers': 'X-Test-Cors', // 允许使用自定义请求头
    'Access-Control-Allow-Methods': 'POST, PUT, Delete', // 允许使用自定义方法
    'Access-Control-Max-Age': '1' //（预检请求）的返回结果（即 Access-Control-Allow-Methods 和Access-Control-Allow-Headers 提供的信息）可以被缓存多久。单位为秒；在该时间内，请求不在进行预请求。
  })
  res.end('123')
}).listen(8887)

JS Const

上一篇：5分钟看懂的WebAssembly入门指南（webassembly开发）
下一篇：如何用5分钟开发一个 Webpack Loader?

前端——CORS跨域请求的限制与解决

node 中设置允许跨域

#通过 JSONP 来进行跨域

#浏览器跨域请求的其他限制

#cors 预请求

#允许方法

#允许 Content-Type

#其他限制

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

说下你的vue项目的目录结构，该怎么划分?

这么牛逼的cursor功能，赶紧用起来

8.7k star，一款超炫酷的动态可视化大屏项目

用上Vue3，你真的变了吗?（vue3 key）

20个免费音乐音效下载网站，无版权素材商业影片也可用

comfyui安装MimicMotion扩展，AI跳舞动作模仿

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331