设置CORS响应头实现跨域

跨域资源共享:跨源资源共享(CORS) - HTTP | MDN

特点:不需要在客户端做任何特殊的操作,完全在服务器中进行处理,支持get和post请求

通过设置一个响应头来告诉浏览器,该请求允许跨域,浏览器收到该响应以后就会对响应放行。

如下搭建一个简单的服务器:

// 引入express
const express = require('express');
// 创建应用对象
const app = express()
// 创建路由规则
// request是对请求报文的封装
// response对响应报文的封装
app.post('/server', (request, response) => {
    // 设置响应头,设置允许跨域
    response.setHeader("Access-Control-Allow-Origin", "*")
    // 设置所有类型的头信息都可以接收.允许自定义头信息
    response.setHeader("Access-Control-Allow-Headers", "*")
    // 设置响应体
    response.send('cors跨域')
})

// 监听端口启动服务
app.listen(8000, () => {
    console.log('服务器已启动。。。。。');
})

 页面操作:

<body>
    <div id="box"></div>

    <script>

        const box = document.getElementById('box')
        // 鼠标悬停div中显示响应结果
        box.addEventListener('mouseover', function () {
            // 创建对象
            const xhr = new XMLHttpRequest()
            // 初始化,设置类型 url
            xhr.open('POST', 'http://192.168.1.6:8000/server')
            // 设置请求体
            // 内容的类型   参数查询字符串的类型  一般可以用作身份效验放进请求头,传递给服务器,由服务器对参数做提取,对用户身份做一个效验
            // xhr.setRequestHeader('Content-Type','application/x-www-form-urlencode')//预定义
            xhr.setRequestHeader('name','aginen')//自定义头信息
            // 发送 设置请求体
            xhr.send()
            // 事件绑定
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // 处理服务端返回的结果
                        console.log(xhr.response);
                        box.innerHTML = xhr.response
                    }
                }
            }
        })
    </script>
</body>

若没有设置响应头允许跨域控制台会报错:

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值