当前位置: 首页 > Web前端 > HTML5

Web跨域jsonp、cors、代理理解

时间:2023-04-05 21:54:32 HTML5

web跨域和跨域的原因:a.协议名称不同b.主机不同C.端口不同是否存在跨域问题:a.Ajax请求会出现问题,这是浏览器处理b的结果。通过url(统一资源定位得到的图片(资源))也是跨域,但是不会出问题。处理跨域jsonp的方法只支持getcors返回responseheader,允许在跨域prory开发中使用serverproxy(例如:webpack-dev-server)1.corsserver端:response.setHeader("Acoss-Control-Allow-Origin","*")//设置响应头,允许接收地址设置不设为*===>允许所有请求地址通过优缺点:无前端需要设置,后台设置不安全,没有http服务的服务器不支持2.jsonp(用的不多)根据后台的函数名,设置全局脚本函数,设置接收数据的回调函数,以及发送标签srchttp请求,不是异步ajax(http)请求ajsonp配置配置全局js//jsonp.jsfunctionfn(data){console.log(data)}页面发送请求//jsonp请求前需要//跨域请求通过src属性,浏览器不拦截后台返回的相应函数和数据res.setHeader("Content-type","application/javascript")//设置响应的类型接收数据的回调3.proxy代理服务器(开发用)发送一个向代理服务器请求,代理服务器将请求目标服务器发送给目标服务器,响应代理服务器,代理服务返回数据给浏览器。脚手架已经配置好node代理服务器,你只需要配置需要代理的目标服务器即可。脚手架配置需要被代理的主机。Vue在config/index.js中的proxytable中配置。客户端自己设置这个代理,但是一般三脚架已经配置了扩展:RequestHeader请求头Accept:设置接收到的数据类型,浏览器解析ResponseHeader响应头Content-type:设置返回类型,浏览器根据这个类型解析,例如:javascriptres.setHeader("Content-type","application/javascript")