设置CORS响应头实现跨域

最新推荐文章于 2024-07-30 10:27:19 发布

Restart小仙女

最新推荐文章于 2024-07-30 10:27:19 发布

阅读量2k

点赞数

文章标签： http 前端 javascript

本文链接：https://blog.csdn.net/weixin_58347102/article/details/124613536

版权

跨域资源共享：跨源资源共享（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>

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

Restart小仙女

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
设置CORS响应头实现跨域

跨域资源共享：跨源资源共享（CORS） - HTTP | MDN特点：不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get和post请求通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。如下搭建一个简单的服务器：// 引入expressconst express = require('express');// 创建应用对象const app = express()// 创建路由规则// request是对请求报文的封装// res
复制链接

扫一扫