美文网首页
Day 43/100 前端基础之跨域(5种)未完待续

Day 43/100 前端基础之跨域(5种)未完待续

作者: 赵国星 | 来源:发表于2020-09-12 23:51 被阅读0次

写在前面的话

没有什么比每天进步一点点更踏实了~

(一)什么是跨域

跨域是a页面想要获取b页面资源,如果a,b页面的协议、域名、端口号、子域名不同,所进行的访问都是跨域的,而浏览器一般为了安全都限制了跨域访问,也就是不允许跨域访问资源。

(二)怎么解决

1、JSONP

JSONP是一个非官方协议,它允许在服务器端集成script tags返回至客户端,通过javascript callback的形式实现跨域访问。

基本思想:网页通过添加一个<script>元素,向服务器请求JSON数据,这种做法不受同源策略限制;服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。

2、window.name

window.name+iframe需要目标服务器响应window.name,window对象有一个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window. name都有读写的权利,window.name 是持久存在一个窗口载入过的所有页面中的!

3、window.postMessage

HTML5引入了一个全新的API:跨文档消息传输Cross Document Messaging 。它的目标是在一个单独的持久连接上提供全双工、双向通信。(同源策略对web sockets不适用)

otherWindow.postMessage(message, targetOrigin)

otherWindow:指目标窗口,也就是给哪个窗口发消息,是window.frames属性的成员或者由window.open方法创建的窗口。

参数说明:

(1)message:是要发送的消息,类型为string,object

(2)targetOrigin:是限定消息接收范围,不限制使用“ * ”


4.CORS

基本思想:使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功,还是应该失败。


5.web sockets

web sockets是浏览器的一种API,它的目标是在一个单独的持久连接上提供全双工、双向通信。(同源策略对web sockets不适用)

web sockets原理:在JS创建了web socket之后,会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后,建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。

欢迎给位大佬补充~ 

参考链接

https://www.jianshu.com/p/451e575a3a8a

https://www.imooc.com/article/309326

同源策略:https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy

相关文章

  • Day 43/100 前端基础之跨域(5种)未完待续

    写在前面的话 没有什么比每天进步一点点更踏实了~ (一)什么是跨域 跨域是a页面想要获取b页面资源,如果a,b页面...

  • 关于设置env等环境变量的思考

    1、如何处理跨域后台处理跨域前端处理跨域浏览器处理跨域 前端本地处理跨域:代理线上跨域的处理方式:Nginx反向代...

  • AJAX 跨域解决方案

    一、跨域基础知识 #前后端分离(服务器) - 前端资源(html)- server-a 提供前端静态资源 - 后端...

  • 跨域解决方案(史上最易懂)

    跨域总结 1.跨域思路 跨域解决方案一般分为两种:前端解决,后端解决 1.1 前端解决方案 通过前端解决的思想就是...

  • 浏览器跨域的那些事

    整理中 目标: 了解跨域 解决跨域 服务器配置跨域(java, nginx) 前端调试时配置解决跨域 一、什么是跨...

  • 前端跨域

    CORS跨域 1.CORS跨域-服务端设置,前端直接调用说明:后台允许前端某个站点进行访问 2.JSONP跨域-前...

  • vue-cli proxyTable配置

    前端的跨域转发 后端不需要配置,前端就可以实现跨域 proxyTable 的通常配置 这样就可以实现基本的跨域转发...

  • NodeJS 请求转发配置

    43.1 不是跨域的跨域[http://vhr.javaboy.org/2020/0323/vhr-43#431-...

  • 前端基础:如何解决跨域问题

    本文首发于 前端基础:如何解决跨域问题[https://gitee.com/reallimengzhe/pract...

  • django跨域配置

    前言——跨域请求 前端对Cross-Origin Resource Sharing 问题(CORS,中文又称'跨域...

网友评论

      本文标题:Day 43/100 前端基础之跨域(5种)未完待续

      本文链接:https://www.haomeiwen.com/subject/olymektx.html