之前我们可以通过“Access-Control-Allow-Origin”,实现跨域请求,那是不是所有跨域请求都可以通过设置Access-Control-Allow-Origin实现跨域请求呢?显然不是,它也会有一些限制
//server.js
const http = require('http');
const fs = require('fs'); http.createServer(function(req,res){
  console.log('req come', req.url);
  const html = fs.readFileSync('test.html', 'utf8');
  res.writeHead(200,{
    'Content-Type': 'text/html'
  })
  res.end(html);
}).listen(8888); console.log('server listening on 8888');
console.log('http://localhost:8888/')
//server2.js
const http = require('http'); http.createServer(function(req,res){
  console.log('req come', req.url);
  res.writeHead(200, {
    'Access-Control-Allow-Origin': '*'
  })
  res.end('345');
}).listen(8887); console.log('server listening on 8887');
console.log('http://localhost:8887/')
<!--test.html-->
<body>
<script>
fetch('http://localhost:8887/',{
  method:'post',
  headers:{
    'X-Test-Cors':'123'
  }
})
</script>
</body>

启动服务,运行server.js,请求8887,发现报错了,而且报错信息跟之前也会有点不一样,提示‘X-Test-Cors’,这个头信息在跨域里面是不被允许的,这就是今天要讲的cors跨域限制

一、跨域请求里面允许的方法
get
head
post
其它都是不允许的,比如put,delete等,浏览器预请求里面是做了验证的,
二、允许的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对象
四、什么是预请求
刚才的请求是有返回值的,但是报错了,忽略了这个值,要不忽略这个值,需要在返回值里面允许这个自定义的头信息
// server2.js
const http = require('http');
http.createServer(function(req,res){
  console.log('req come', req.url);
  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': "1000", //1000秒内不用再次发送预请求来验证,直接发起正式的请求就可以
  })
  res.end('345');
}).listen(8887);
console.log('server listening on 8887');
console.log('http://localhost:8887/')

这样设置,这个请求就成功了,但是可以观测到多了一个请求,这个多出来的请求就是预请求,告诉浏览器,这个自定义请求是允许的,然后再正式的发送这个请求,通过验证之后就请求成功了,浏览器为什么要做这些限制,是因为保证安全,不允许随便一个人都可以进行跨域

CORS跨域限制以及预请求验证的更多相关文章

  1. CORS 跨域中的 preflight 请求

    我们知道借助Access-Control-Allow-Origin响应头字段可以允许跨域 AJAX, 对于非简单请求,CORS 机制跨域会首先进行 preflight(一个 OPTIONS 请求), ...

  2. ajax跨域通过 Cors跨域资源共享 进行GetPost请求

    using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Ne ...

  3. JSONP跨域和CORS跨域

    什么是跨域? 跨域:指的是浏览器不能执行其它网站的脚本,它是由浏览器的同源策略造成的,是浏览器的安全限制! 同源策略 同源策略:域名.协议.端口均相同. 浏览器执行JavaScript脚本时,会检查这 ...

  4. SpringBoot配置Cors跨域请求

    一.同源策略简介 同源策略[same origin policy]是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源. 同源策略是浏览器安全的基石. 什么是源 源[or ...

  5. CORS跨域请求规则以及在Spring中的实现

    CORS: 通常情况下浏览器禁止AJAX从外部获取资源,因此就衍生了CORS这一标准体系,来实现跨域请求. CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origi ...

  6. CORS——跨域请求那些事儿

    在日常的项目开发时会不可避免的需要进行跨域操作,而在实际进行跨域请求时,经常会遇到类似 No 'Access-Control-Allow-Origin' header is present on th ...

  7. CORS跨域请求

    一.问题: 服务器端代码 from flask import Flask from flask import make_response from flask import jsonify app = ...

  8. 4 伪ajax:jsonp、cors 跨域请求

    一.同源策略 https://www.cnblogs.com/yuanchenqi/articles/7638956.html 同源策略(Same origin policy)是一种约定,它是浏览器最 ...

  9. [转] 重定向 CORS 跨域请求

    非简单请求不可重定向,包括第一个preflight请求和第二个真正的请求都不行. 简单请求可以重定向任意多次,但如需兼容多数浏览器,只可进行一次重定向. 中间服务器应当同样配置相关 CORS 响应头. ...

随机推荐

  1. jinkens + svn 把代码更新到本地在运行。(方法比较笨,只是想实现自己的想法。把代码更新下来在运行。)

    jinkens + svn 把代码更新到本地在运行.

  2. 1.1 Go安装与项目结构初始化

    软件安装安装包下载地址为:https://golang.org/dl/ 如果打不开可以: https://golang.google.cn/dl/ https://dl.google.com/go/g ...

  3. 转 如何在secureCRT上设置常用的快捷输出按钮栏听语音

    https://jingyan.baidu.com/article/5d6edee2f32de199eadeec25.html 要注意secureCRT的版本,建议下载最新版本的软件         ...

  4. 大数据 Big Data howto

    The Fourth Paradigm: Data-Intensive Scientific Discovery http://research.microsoft.com/en-us/collabo ...

  5. javascript实现移动端网页版阅读器

    现在手机上的文本阅读app已经非常丰富,良好的阅读体验与海量的书库常常令我感到无比兴奋. 我想到8年前用一点几寸屏幕的mp3看电子书的情景,顿生一种淡淡的温馨.再久远一些,小的时候,我也经常和小伙伴们 ...

  6. Kudu的性能测试

    不多说,直接上干货! Kudu的性能测试 1.  kudu和parquet的比较   上图是官方给出的用Impala跑TPC-H的测试,对比Parquet和Kudu的计算速度.从图中我们可以发现,Ku ...

  7. php乱码的解决方法

    一般如果会出现乱码,基本都是因为编码不统一造成的,所以我们只需要把编码改成一样的就好了. 我们编码一般都是以utf-8为主: 文件编码都是UTF-8无BOM,如果文件不是这个编码,可以使用文件编辑器转 ...

  8. Python第三方库使用感言

    Python第三方库使用的感言加使用笔记 一般来讲第三方库会提供大量的类与对象, 对象方法的返回值和库中函数的返回值一般不会是Python原始自带的对象, 而是由该第三方库提供的对象, 因为Pytho ...

  9. 把js生成的内容放入网页原有的div上

    <script> ; ; //5列 ); ; var htmlstr="<table style='position:absolute;top:9%;left:10%; b ...

  10. nodejs操作文件

    var fs = require('fs'); var txt = "以上程序使用fs.readFileSync从源路径读取文件内容,并使用fs.writeFileSync将文件内容写入目标 ...