网站建设背景分析,wordpress批量上传,大庆建设局网站,可以做家装设计的网站同源
同源指的是URL有相同的协议、主机名和端口号。
同源策略
同源策略指的是浏览器提供的安全功能#xff0c;非同源的RUL之间不能进行资源交互
跨域
两个非同源之间要进行资源交互就是跨域。
浏览器对跨域请求的拦截
浏览器是允许跨域请求的#xff0c;但是请求返回…同源
同源指的是URL有相同的协议、主机名和端口号。
同源策略
同源策略指的是浏览器提供的安全功能非同源的RUL之间不能进行资源交互
跨域
两个非同源之间要进行资源交互就是跨域。
浏览器对跨域请求的拦截
浏览器是允许跨域请求的但是请求返回的数据会被浏览器拦截无法显示到页面拦截过程 解决跨域JSONP
jsonp的原理就是利用了script标签不受浏览器同源策略的限制然后和后端一起配合来解决跨域问题的。
前端后端不受同源策略影响的标签image、script、link、iframe
JSONP利用script标签将请求放在src标签中前端通过一段javascript代码获取后端数据。
script srchttps://localhost:8080/getJSONP?fnsetJSONP/script
优势轻量、兼容性高不需要XMLHttpRequest
缺点
只支持get请求存在被恶意注入脚本风险接口异常无法监听 CORS跨域资源共享
后端设置响应头中的Access-Control-Allow-Origin字段该属性表示哪些域名可以访问资源如果设置通配符则表示所有网址都可以访问资源。
res.header(Access-Control-Allow-Origin,*)
res.header(Access-Control-Allow-Origin,http://localhost:8080)
优点操作简单、支持所有http请求类型get、post、delete、put
缺点IE8以下的浏览器不支持
代理转发
同源策略是浏览器需要遵循的标准而如果是服务器向服务器请求就无需遵循同源策略。
nginx反向代理方式和node中间件代理方式的原理其实差不多都是利用了服务器和服务器之间通信不受浏览器的同源策略的限制但是node代理方式相对复杂一些还要自己搭建一个node服务器而用nginx只需要修改nginx.conf配置文件即可解决跨域问题。
postMessage
h5新增的跨文档消息传递window.postMessage() 方法可以安全地实现跨源通信此方法一种受控机制来规避此限制只要正确的使用这种方法就很安全。
主要的用途是实现多窗口多文档之间通信
页面和其打开的新窗口的数据传递多窗口之间消息传递页面与嵌套的 iframe 消息传递
body h2index页面/h2iframesrchttp://localhost:3000frameborder0idiframeonloadload()/iframe
/body
scriptwindow.addEventListener(message, ev {const {data, origin, source} evif(origin ! http://localhost:3000) returnconsole.log(接收iframe页面发送的消息, data)})function load() {iframe.contentWindow.postMessage(给iframe页面发送的消息, http://localhost:3000);}
/scriptbodyh1iframe嵌入的页面/h1
/body
scriptwindow.addEventListener(message, ev {const {data, origin, source} evif(origin ! http://127.0.0.1:5500) returnconsole.log(接收到index页面发送的消息:, data)source.postMessage(给index页面发送的消息, origin)})
/script使用postMessage向其它窗口发送数据的时候需要注意的就是应该始终指定精确的目标 origin而不是 *使用window监听message事件接收其他网站发送的 message时请始终使用 origin 和 source 属性验证发件人的身份。
Websocket方式解决跨域
使用Websocket也可以解决跨域问题因为WebSocket本身不存在跨域问题所以我们可以利用webSocket来进行非同源之间的通信
