李成笔记网

专注域名、站长SEO知识分享与实战技巧

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


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 来进行跨域


// 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 对象

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

// 客户端

// 服务端
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)

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言