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

liuian 2025-09-18 03:44 21 浏览

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)

预检请求