有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

CORS跨域请求的限制与解决(实现方式)

javascript 炮渣日记 3周前 (11-08) 16次浏览 已收录 0个评论 扫描二维码

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)
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址