http头部字段Origin和Access-Control-Allow-Origin解决请求跨域
更新时间：2023年06月25日 14:36:18 作者：一颗冰淇淋
这篇文章主要为大家介绍了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解决请求跨域的资料请关注脚本之家其它相关文章！
相关文章
js中有各种与位置相关的属性,每次看到的时候都各种懵逼,索性一次总结一下,这篇文章主要给大家介绍了关于js中位置计算的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2021-09-09
本文主要介绍了Js apply方法的相关知识，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了微信小程序返回上一页刷新组件数据的相关资料,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧2024-03-03
怎么限制input的text里输入的值只能是数字(正则、js)
这篇文章主要通过正则表达式和JS代码限制input的text里输入的值只能是数字的相关资料,需要的朋友可以参考下2016-05-05
闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。小编之前一直糊里糊涂的，没有能够弄明白JavaScript的闭包到底是什么，有什么用，本文把自己的理解些出来分享一下，希望不理解JavaScript闭包的朋友们看了之后能够理解闭包！2016-01-01
使一个函数作为另外一个函数的参数来运行的javascript代码
使一个函数作为另外一个函数的参数来运行的javascript代码...2007-08-08
本文主要介绍了Javascript实现登录记住用户名和密码功能的代码。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
window.name 的美妙之处：name 值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。2008-09-09
Promise是异步编程的一种解决方案,比传统的解决方案（回调函数和事件）更合理和更强大,下面这篇文章主要介绍了js进阶教程之promise全方位解析和异步编程的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-10-10
这篇文章主要介绍了如何在CocosCreator中做一个List，对List列表感兴趣的同学，不妨来试验一下2021-04-04
最新评论