专栏首页coding个人笔记HTTP之跨域预请求options

HTTP之跨域预请求options

今天分享一个关于预请求的,我们先写一个接口,新建server.js,代码:

const http = require('http');
http.createServer(function (request, response) {
  response.writeHead(200, {
    'Access-Control-Allow-Origin': '*'
  });
  response.end('welcome to options');
}).listen(3000);
console.log('listen port 3000');

然后node server.js,打印出listen port 300表示启动成功,接着写一个Ajax请求:

$.ajax({
  url: 'http://192.168.164.16:3000/',
  method: 'get',
  success: function (res) {
    console.log(res);
  }
})

'Access-Control-Allow-Origin': '*'是允许跨域,当然,一般不会用*,会设置某一个地址。

先明确一个概念,预请求是浏览器的策略机制,在真正发送请求之前,会先进行一次预请求作用是用于试探性的服务器响应是否正确,如果options获得的回应是拒绝性质的,就会停止post、get等请求的发出,或者报错。

会发起预请求有几个条件:

请求方法不是GET、POST、HEAD

Content-Type不是text/plain、multipart/form-data、application/x-www-form-urlencoded

请求自定义了header字段的

上面三种情况都会发起预请求,当我们使用get、post、head方法发起Ajax请求的时候,用上面的接口测试,确实不会发起预请求。而且用这三个请求方法之外的都会报错,跨域。可以加允许跨域的方法:

'Access-Control-Allow-Methods': 'PUT'

接着Ajax发起put方法的请求,就会有两次请求,一次是预请求options,一次是请求成功:

接着测试一下content-type,修改请求:

$.ajax({
  url: 'http://192.168.164.16:3000/',
  method: 'get',
  contentType: 'text/plain',
  success: function (res) {
    console.log(res);
  }
})

分别设置contentType为上面的三个,发现也不会发起预请求options:

如果换成json的:

测试这个的时候要设置请求头:'Access-Control-Allow-Headers': '*'。

如果我们设置另外的header:

$.ajax({
  url: 'http://192.168.164.16:3000/',
  method: 'get',
  headers: {'X-Test': 'ok'},
  success: function (res) {
    console.log(res);
  }
})

也是会发起预请求的。

最后发现,上面三种情况之外,会发起预请求的也都会报错跨域。还有就是,有些报跨域,但是数据还是能得到,只是浏览器认为是不安全的,你可以在network看见数据但是你是拿不到数据的。

(完)

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-08-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • http、https、http2一些概念

    非对称加密,现在用的几乎都是非对称加密,自己有一个密钥对公钥和私钥,公钥可以给任何人知道,别人通过公钥加密发数据给自己,自己通过密钥解密。

    wade
  • 雅虎军规最后一天

    主要是在一个文件了只需要一个HTTP请求,但是又说有些是不支持的,例如iPhone。

    wade
  • CSRF攻击

    CSRF叫做跨站请求伪造攻击,也有叫XSRF的,其实都差不多,你也可以认为是XSS和CSRF的结合。对于这个攻击原本我是不怎么理解的,写了个接口,然后试了一下,...

    wade
  • javaWeb idea学习笔记(四)HTTP

    User-Agent:浏览器告诉服务器,浏览器访问服务器使用的版本信息,可以在服务器端去获取该头的信息来解决浏览器的兼容性问题。

    逆回十六夜
  • 记录一下 http status code

    一般查询我们都会使用 GET 方法, 创建新的记录使用 POST 方法 更新已有数据使用 PUT 方法 更新已有数据部分属性使用 PATCH 方法 删除已有数据...

    用户7053485
  • 3.请求安全-- 如何验证请求的唯一性

    #如何验证请求的唯一性# ##前言## 讲到请求的唯一性,是我在接口API中开发中遇到的一个问题,有一个需求就当当你的链接被捕获之后如何让它失效,当然是在别人没...

    喵了个咪233
  • 看我如何回怼手机黑客?黑回去!

    本文中,以色列研究者通过反编译恶意APK应用GlanceLove,向攻击者服务器上传了webshell,实现了Hack Back(黑回去)。

    FB客服
  • 常见HTTP状态码 转

    成功的状态码(基本以2开头):这一类型的状态码,代表请求已成功被服务器接收、理解、并接受

    双面人
  • 基础拾掇之——http基础

    http协议介绍 http:Hyper Text Transfer Protocol 超文本传输协议,是互联网应用最为广泛的一种网络协议,主要用于Web服务。通...

    小小科
  • HTTP 基本知识

    code_horse

扫码关注云+社区

领取腾讯云代金券