node.js:cors响应头部

230 阅读1分钟

「这是我参与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>