当前位置: 首页 > 后端技术 > Node.js

http-web前后端的跨域

时间:2023-04-03 20:00:17 Node.js

本文详见github:https://github.com/captainJac...server文件夹server.js提供主服务器api服务节点server/server.js启用服务staticServer.js提供静态html容器节点服务器/staticServer.js打开服务www文件夹cross-domain.html客户端页面,发送XHR或者fetch浏览器跨域相关跨域是为了保证服务器的安全,不允许随意请求。这是浏览器的安全行为提示localhost和127.0.0.1是不同的域,浏览器不知道localhost映射到127.0.0.1,所以认为是不同的域。常见的跨域Access-Control-Allow-Origin当浏览器报跨域错误时,==其实服务器的响应已经到了浏览器==,但是浏览器会比较请求的头部信息,并比较Access-Control-Allow-Origin头信息是否允许当前域。否则会提示错误JSONPforlink,script,image等。标签src或ref可以从非同域获取资源,js可以动态创建script标签获取数据。这个不需要后端支持CORS预请求&&跨域敲黑板:Access-Control-Allow-Origin不完全支持跨域,还有其他限制,比如使用fetch,一些自定义header跨域时不允许超出允许范围的信息、方法等。需要超出以下允许范围的预请求通过预请求验证&&一些限制允许方法GETPOSTHEAD允许Content-Typetext/plainmultipart/form-dataapplication/x-www-form-urlencoded请求头限制,查看官方文档XMLHttpRequestUpload对象是notregisteredanytimelistenerrequestisnotusedReadableStream对象的pre-request是根据什么判断请求是否被允许的?-ResponseHeaders信息,浏览器读取ResponseHeaders信息就知道当前请求是否被允许。对于CORS跨域,有很多限制,如下,这些自定义方法Con只允许在限制范围内tent-Typeheaderinformation...详情请参考官方文档,以自定义header信息为例。前端fetch('http://127.0.0.1:8887',{method:'POST',//在这里添加一个自定义的头部信息headers:{'X-Test-Cors111':'test'}})后端response.writeHead(200,{'Access-Control-Allow-Origin':'*',})这个时候浏览器会提示准确对应的错误这个时候后台需要如下来允许这种自定义header信息,这样就可以返回response.writeHead(200,{'Access-Control-Allow-Origin':'*','Access-Control-Allow-Headers':'X-Test-Cors111'})同理,还有其他限制'Access-Control-Allow-Headers':'X-Test-Cors111'//对于自定义头信息'Access-Control-Allow-Methods':'PUT,DELETE',//对于自定义方法'Access-Control-Max-Age':'1000',//Access-Control-Max-Age:在当前请求下面,上面的形式请求允许跨域即可,不需要发送前置请求1000s以内验证,发起正式请求即可。tips:chromedevTools有时不提示optionspre-request的XHR?Badverificationofsendingoptionspre-request查看详细的http请求和响应内容:curl-vwww.baidu.com