http头部字段Origin和Access-Control-Allow-Origin解决请求跨域

Http协议中请求头和响应头

Http协议中请求头和响应头携带了很多信息，其中 请求头 Origin，响应头 Access-Control-Allow-Origin 与跨域有关。

为了验证跨域，要将客户端和服务端分配在不同端口，这里通过 nodejs 在8080端口起一个服务，用于响应客户端的请求

const http = require('http');
const server = http.createServer((req,res)=>{
    res.end('hello 8000~')
});
server.listen(8000,()=>{
    console.log('监听8000端口')
})

如果通过浏览器url上直接输入地址访问，响应 hello 8080~

8080端口起的服务

客户端新建 html 页面，发送 get 请求向本地的 8080 端口

<script>
    const url = 'http://127.0.0.1:8000'
    fetch(url).then(res=>{
        console.log('请求结果',res)
    })
</script>

再通过5500端口打开页面，会发现请求发送失败，控制台报错【被跨域策略阻止了】

跨域

通过查看请求信息可以发现，请求头部字段 Origin 标识着当前请求url

请求头origin

同域下才可以发送异步请求，是浏览器的保护策略，在响应头告知浏览器哪些来源允许跨域，则可以不受浏览器的限制。

const server = http.createServer((req,res)=>{
    res.setHeader("Access-control-allow-origin","http://127.0.0.1:5500")
    res.end('hello 8000~')
});

再次发送get请求，就可以响应头上增加了Access-control-allow-origin属性，并且请求成功，返回200的状态码

响应成功

以上就是http头部字段Origin和Access-Control-Allow-Origin解决请求跨域的详细内容，更多关于http解决请求跨域的资料请关注脚本之家其它相关文章！