「这是我参与2022首次更文挑战的第3天,活动详情查看:2022首次更文挑战」
CORS是跨源资源分享(Cross-Origin Resource Sharing)的缩写。它是W3C标准,是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求,CORS允许任何类型的请求。
基本语法
响应头部可以携带一个字段,语法如下: 如果我们指定了字段的值为通配符*,表示允许来自任何域名的请求 cors跨域资源共享
Access-Control-Allow-Origin:<orgin> |*
res.setHeader('Access-Control-Allow-Origin','http://itcast.cn')
CORS分为两种请求:
1、简单请求(满足以下条件): 客户端与服务器只会发生一次请求
-
请求方式为HEAD、POST 或者 GET -
http头信息不超出一下字段:Accept、Accept-Language 、 Content-Language、 Last-Event-ID、 Content-Type(限于三个值:application/x-www-form-urlencoded、multipart/form-data、text/plain) -
为什么要分为简单请求和非简单请求,因为浏览器对这两种请求方式的处理方式是不同的。
2、非简单请求 : 客户端与服务器只会发生两次请求,option预请求成功后,才会发生真正的请求。
-
非简单请求是那种对服务器有特殊要求的请求,比如请求方法是PUT或DELETE,或者Content-Type字段的类型是application/json。 -
非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight)。
在这里只写出来定义POST的接口方式,其余的DELETE,GET方式以此类推都一样。
<body>
<button id="btnGET">GET</button>
<button id="btnPOST">POST</button>
<button id="btnDELETE">DELETE</button>
</body>
<script>
$(function(){
//1.测试get接口
$('#btnGET').on('click',function(){
$.ajax({
type:'GET',
url:'http://127.0.0.1/api/get',
data:{name:'zs',age:20},
success(res){
console.log(res);
}
})
})
})
//2.测试post接口
$('#btnGET').on('click', function () {
$.ajax({
type: 'POST',
url: 'http://127.0.0.1/api/post',
data: {
name: '水浒传',
age: '施耐庵'
},
success(res) {
console.log(res);
}
})
})
//2.删除按钮绑定处理事件
$('#btnGET').on('click', function () {
$.ajax({
type: 'DELETE',
url: 'http://127.0.0.1/api/delete',
success(res) {
console.log(res);
}
})
})
})
//定义POST接口
router.post('/post',(req,res)=>{
//通过req.body获取请求体包含的url-encoded格式的数据
const body=req.body
res.send({
status:0,
msg:'POST请求成功!',
data:body
})
})
......
module.exports=router
</script>