跨域资源共享:跨源资源共享(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>
若没有设置响应头允许跨域控制台会报错: