位置: IT常识 - 正文

前端跨域解决方案(前端跨域解决方案设计)

编辑:rootadmin
前端跨域解决方案 文章目录1.同源政策2.跨域解决方案2.1 CORS普通跨域请求:只需服务端设置Access-Control-Allow-Origin即可携带cookie跨域请求:前后端都需设置2.2 JSONP原理缺点数据格式jsonp跨域实现2.3 postMessage跨域2.4 WebSocket属性:事件:使用2.5 代理跨域:开启一个代理服务器实现数据转发2.6 iframe系列3. 参考资料1.同源政策

推荐整理分享前端跨域解决方案(前端跨域解决方案设计),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端跨域方案,前端跨域方式有哪些,前端跨域解决方案,前端跨域解决方案有哪些,前端跨域解决方案设计,前端跨域解决方案设计,前端跨域解决方案面试,前端跨域解决方案面试,内容如对您有帮助,希望把文章链接给更多的朋友!

如果两个页面拥有相同的协议、域名和端口,那么这两个页面就属于同一个源,其中只要有一个不相同,就是不同源。 http://www.example.com:8080/dir/page.html与 http://www.example.com/page.html不跨域 http:协议 www:子域名 example:主域名 8080:端口号(http默认8080)

同源策略的限制: Cookie、LocalStorage 和 IndexDB 无法读取 AJAX 请求不能发送

跨域是浏览器为了安全而实施的同源政策导致的

2.跨域解决方案

跨域报错:

2.1 CORS

有几个关键的响应头字段:

a、Access-Control-Allow-Origin:必填,表示可以允许请求的来源。可以填写具体的源名称,也可以填写*表示允许任何源请求。

b、Access-Control-Allow-Methods:表示允许的请求方法列表。

c、Access-Control-Allow-Credentials:一个布尔值,表示是否允许发送cookie。默认情况下,cookie 不包含在 CORS 请求中。如果设置为 true,则表示服务器具有显式权限。Cookies 可以包含在请求中并一起发送到服务器。

d、Access-Control-Allow-Headers:其指明了实际请求中允许携带的首部字段。CORS请求时,XMLHttpRequest对象的getresponseheader()方法只能获取六个基本字段:缓存控制、内容语言、内容类型、过期时间、最后修改时间和pragma。如果要获取其他字段,则必须在访问控制公开标头中指定它们。

e、Access-Control-Max-Age:预检请求的有效期。在此期间,无需再次发送预检请求。

普通跨域请求:只需服务端设置Access-Control-Allow-Origin即可

Access-Control-Allow-Origin: *表示该资源可以被任意外域访问,若设置具体的值则只可与设置的值跨域

备注: 当响应的是附带身份凭证的请求时( cookie ),服务端 必须 明确 Access-Control-Allow-Origin 的值,而不能使用通配符“*”。

携带cookie跨域请求:前后端都需设置

如果设置 Access-Control-Allow-Origin: * ,不管withCredentials有没有设置,cookie也不会携带

前端设置: 若使用原生ajax

//使用ajax时加上withCredentials属性为true以携带cookiexhr.withCredentials = true;

若用jQuery ajax

$.ajax({ url:'', xhrFields: { withCredentials: true // 前端设置是否带cookie }, crossDomain: true, // 会让请求头中包含跨域的额外信息,但不会含cookie});

服务器端设置:

// 允许跨域访问的域名:若有端口需写全,注意不能用*"Access-Control-Allow-Origin":"http://www.domain1.com" // 允许前端带认证cookie"Access-Control-Allow-Credentials": "true"

2.2 JSONP原理

JSONP主要就是利用了script标签没有跨域限制的这个特性来完成的,它可以通过src填写目标地址,发送一个带回调参数的get请求。服务器将接口返回数据分割成回调函数返回给浏览器。浏览器解析并执行就可得到服务器返回的数据。

缺点前端跨域解决方案(前端跨域解决方案设计)

只支持get请求,不支持post请求。适用于加载不同域名的js、css、img等静态资源

数据格式

键值对,要加双引号,除了值为数字时不用加双引号

[ { "id":1, "name":"Rick", "email":"rick@gmail.com" }, { "id":2, "name":"Glenn", "email":"glenn@gmail.com" }]jsonp跨域实现

若用原生Ajax(点击按钮向服务器发送请求): script.src的callback后为回调函数的名字

var btn = document.getElementById('btn'); function jsonpCores(url) { var script = document.createElement('script'); script.src = 'url?callback=callbackName'; // 将script标签追加到页面中 document.body.appendChild(script); window.callbackName= function(res){ console.log(res); } // 将head中的script标签删除掉,防止多个script标签导致代码冗余 document.body.removeChild(script); console.log('123'); }; btn.onclick =jsonpCores('');

若用jQuery ajax

$.ajax({url: '',method:'get',// 回调函数的名称jsonpCallback: 'fn',dataType: 'jsonp', //设置请求方式为jsonp})

若用vue.js

this.$http.jsonp('url', { params: {}, jsonp: 'fn' //回调函数名}).then((res) => { console.log(res); })

2.3 postMessage跨域

语法:otherWindow.postMessage(message, targetOrigin, [transfer]); otherWindow: 其他窗口的一个引用,比如 iframe 的 contentWindow 属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames message:将要发送到其他 window的数据 targetOrigin:指定哪些窗口能接收到消息事件,其值可以是字符串"*"(表示无限制)或者一个URI(最好填一个确切的url)。 transfer (可选):是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权

接收其他域传来的数据: window.addEventListener("message", function(e){ console.log(e.data) },false);

message 的属性有: data:从其他 window 中传递过来的数据对象。 origin:调用 postMessage 时消息发送方窗口的 origin . 例如 “https://example.org (隐含端口 443)”。请注意,这个origin不能保证是该窗口的当前或未来origin,因为postMessage被调用后可能被导航到不同的位置。 source:对发送消息的窗口对象的引用; 您可以使用此来在具有不同origin的两个窗口之间建立双向通信。

2.4 WebSocket

WebSocket 对象提供了用于创建和管理 WebSocket 连接,以及可以通过该连接发送和接收数据的 API。 使用 WebSocket() 构造函数来构造一个 WebSocket

var aWebSocket = new WebSocket(url [, protocols]); url:要连接的URL;WebSocket服务器将响应的URL。 protocols 可选:一个协议字符串或者一个包含协议字符串的数组。这些字符串用于指定子协议,这样单个服务器可以实现多个WebSocket子协议(例如,您可能希望一台服务器能够根据指定的协议(protocol)处理不同类型的交互)。如果不指定协议字符串,则假定为空字符串。

属性:

WebSocket.onclose 用于指定连接关闭后的回调函数。 WebSocket.onerror 用于指定连接失败后的回调函数。 WebSocket.onmessage 用于指定当从服务器接受到信息时的回调函数。 WebSocket.onopen 用于指定连接成功后的回调函数。 WebSocket.url (只读) WebSocket 的绝对路径。

事件:

使用 addEventListener() 或将一个事件监听器赋值给本接口的 oneventname 属性,来监听下面的事件。 close:当一个 WebSocket 连接被关闭时触发。 error:当一个 WebSocket 连接因错误而关闭时触发,例如无法发送数据时。 message:当通过 WebSocket 收到数据时触发。 open:当一个 WebSocket 连接成功时触发。

使用

前端

const socket = new WebSocket('ws://localhost:8080');socket.addEventListener('open', function (event) { socket.send('成功连接服务器!'); //向服务器发送数据});// Listen for messagessocket.addEventListener('message', function (event) { console.log('获取服务器数据 ', event.data);});//当不需要再用 WebSocket 连接时调用 WebSocket close()方法socket.close();

后台

const WebSocket = require("ws");const server = new WebSocket.Server({ port: 8080 });server.on("connection", function(socket) { //建立连接 socket.on("message", function(data) { //获取客户端发来的数据 socket.send(data); });});

2.5 代理跨域:开启一个代理服务器实现数据转发

正向代理帮助客户端访问客户端无法访问服务器本身并将结果返回给客户端。 反向代理从客户端获取请求并将请求转发给其他服务器。 正向代理服务器帮助客户端做事,反向代理服务器帮助其他服务器做事 Nginx反向代理跨域: 配置nginx

server { listen 80; server_name client.test; location /api { proxy_pass http://localhost:8080; }}

Nodejs中间件代理跨域: 用vue框架webpack.config.js配置

module.exports = { devServer: { historyApiFallback: true, proxy: [{ target: '', // 代理跨域目标接口 changeOrigin: true, secure: false, // 当代理某些https服务报错时用 }] }}

2.6 iframe系列

document.domain +iframe跨域:两个页面都通过js强制设置document domain为基础主域,实现同域 locatin.hash + iframe跨域: a 与b跨域相互通信,通过中间页c来实现,三个页面,不同域之间利用iframe的location.hash传值,相同域之间直接js访问来通信。 window. name + iframe跨域:通过iframe的src属性由外域转向本地域,跨域数据即由iframe的window.name从外域传递到本地域。 详见:https://segmentfault.com/a/1190000022398875

3. 参考资料

MDN CORS MDN window.postMessage MDN WebSocket Front end cross domain problems and Solutions

本文链接地址:https://www.jiuchutong.com/zhishi/297496.html 转载请保留说明!

上一篇:成功解决成功解决selenium.common.exceptions.WebDriverException: Message: unknown error: cannot find Chrome bi(成功解决用英语怎么说)

下一篇:Javascript中的图像数据对象:Image、ImageData 和 ImageBitmap(javascript图表)

  • 爱奇艺怎么加好友(爱奇艺怎么加好友关注)

    爱奇艺怎么加好友(爱奇艺怎么加好友关注)

  • 苹果11怎么进入刷机模式(苹果11怎么进入恢复模式)

    苹果11怎么进入刷机模式(苹果11怎么进入恢复模式)

  • 淘宝月卡在哪里查看(淘宝月卡在哪里续费)

    淘宝月卡在哪里查看(淘宝月卡在哪里续费)

  • 微信封16天是多严重(微信封号16天是什么原因)

    微信封16天是多严重(微信封号16天是什么原因)

  • 怎么查华为手机激活时间(怎么查华为手机激活日期)

    怎么查华为手机激活时间(怎么查华为手机激活日期)

  • 笔记本电脑的无线网络开关在哪里 (笔记本电脑的无线开关在哪里打开)

    笔记本电脑的无线网络开关在哪里 (笔记本电脑的无线开关在哪里打开)

  • 买相机有什么问题需要注意(买相机有什么注意事项)

    买相机有什么问题需要注意(买相机有什么注意事项)

  • 换了硬盘要重装系统吗(换了硬盘重装系统要激活码)

    换了硬盘要重装系统吗(换了硬盘重装系统要激活码)

  • 第一次保存word文档时会弹出什么对话框(word文档忘了保存,如何恢复最近)

    第一次保存word文档时会弹出什么对话框(word文档忘了保存,如何恢复最近)

  • 抖音可以批量取消关注吗(抖音可以批量取关人吗)

    抖音可以批量取消关注吗(抖音可以批量取关人吗)

  • 手机qq能发文件夹吗(手机qq文件能发到微信吗)

    手机qq能发文件夹吗(手机qq文件能发到微信吗)

  • 安川伺服驱动器故障代码710(安川伺服驱动器报警c90)

    安川伺服驱动器故障代码710(安川伺服驱动器报警c90)

  • oppo手机怎么取消横屏(oppo手机怎么取出手机卡)

    oppo手机怎么取消横屏(oppo手机怎么取出手机卡)

  • 淘宝直播允许放录像吗(淘宝直播可以插播视频吗)

    淘宝直播允许放录像吗(淘宝直播可以插播视频吗)

  • 天猫精灵能远程遥控吗(天猫精灵能远程连接wifi吗)

    天猫精灵能远程遥控吗(天猫精灵能远程连接wifi吗)

  • 系统对www网页存储的默认格式是

    系统对www网页存储的默认格式是

  • 哪些直播平台属于腾讯(直播平台那些)

    哪些直播平台属于腾讯(直播平台那些)

  • 拼多多助力享免单是什么意思(拼多多助力享免单是真的吗)

    拼多多助力享免单是什么意思(拼多多助力享免单是真的吗)

  • airpods pro怎么接电话(airpods pro怎么接微信)

    airpods pro怎么接电话(airpods pro怎么接微信)

  • word中怎么自动排序号(word中怎么自动添加目录)

    word中怎么自动排序号(word中怎么自动添加目录)

  • 云服务联系人如何删除(云服务里的联系人号码怎么彻底删除)

    云服务联系人如何删除(云服务里的联系人号码怎么彻底删除)

  • 证件照p过可以用吗(证件照p过可以修图吗)

    证件照p过可以用吗(证件照p过可以修图吗)

  • soul 绿点代表什么(soul的绿点不准吗?)

    soul 绿点代表什么(soul的绿点不准吗?)

  • 微博好友圈是不是一定要互相关注(微博好友圈是不是只有好友能看见)

    微博好友圈是不是一定要互相关注(微博好友圈是不是只有好友能看见)

  • 微信200张图片怎么发(微信200张图片怎么发朋友圈)

    微信200张图片怎么发(微信200张图片怎么发朋友圈)

  • 小米sos紧急求助模式怎么关闭(小米sos紧急求助功能没反应)

    小米sos紧急求助模式怎么关闭(小米sos紧急求助功能没反应)

  • 税务师考试给个税表吗
  • 社保次月缴纳上月算不算中断
  • 退回的税款如何做账
  • 计提持有至到期投资减值准备
  • 生产企业出口货物可享受免税并退税
  • 进项抵欠税相关政策
  • 所得税退税会计账务怎么处理
  • 小企业营业外收入明细
  • 收到美元货款兑换人民币流程
  • 出纳现金日记账表格模板
  • 购入的苗木种植一段时间后再销售要交增值税吗?
  • 利润表要怎么看
  • 当期销项税额等于什么乘以什么
  • 企业申报表填写错误
  • 停车费属于不动产租赁服务税率
  • 挖掘机折旧怎么计算
  • 一年期电子银行承兑汇票
  • 收到委托代销清单的会计分录
  • 公司办事处人员配置标准最新
  • 备抵法发生坏账分录
  • 存货跌价准备的金额
  • 增值税普通发票和电子普通发票的区别
  • 改变资金用途的说明
  • mac切换不了中文怎么回事
  • 研发费用没有发票可以加计扣除吗
  • 拍卖获得收入个税
  • PHP:pg_escape_bytea()的用法_PostgreSQL函数
  • 处置子公司的收益
  • 股权转让会记分录
  • Yii2.0小部件GridView(两表联查/搜索/分页)功能的实现代码
  • 企业预缴增值税附加税率
  • css去掉项目符号
  • php session实例
  • vue项目使用rem
  • centos7编译安装内核
  • 资产负债表其他应收款计算公式
  • 个人出租房屋要交印花税吗
  • SQLite教程(三):数据表和视图简介
  • 应该是下个月
  • 普通发票需要做合同才能开吗
  • 其他综合收益相关分录
  • 应交税费应交增值税明细账图
  • 百旺金赋抄报税指南
  • 税金及附加减半征收金额按哪个
  • 已执行新金融准则 本期金额
  • 减免进项税的分录怎么做
  • 初级会计实务中第二章第四节存货(5)费琪
  • 再保险业务范围
  • 珠宝行业的会计处理方式
  • 带有折扣的增值税专用发票图片
  • 取得下列资产时应按公允价值计量
  • 赠品视同销售价格如何确定?
  • 电动车折旧年限及残值
  • 应交税费月底怎么结账
  • 企业管理费的计算基础
  • 红酒礼品盒批发
  • 关税用什么会计科目
  • sql中存储过程的用法
  • linux CentOS6.5 yum安装mysql5.6
  • 同一个用户
  • 系统安装驱动卡住了
  • ubuntu 18.04防火墙
  • xp如何升级到sp3
  • mac电脑卡死按哪三个键
  • scanexplicit.exe - scanexplicit是什么进程 作用是什么
  • 手动为LiteSpeed安装eAccelerator和XCache的方法分享
  • linux怎么添加一个用户
  • parentElement,srcElement的使用小结
  • 只用html和css
  • js闭包解决了什么问题
  • jQuery Checkbox 全选 反选的简单实例
  • nodejs sleep方法
  • unity笔记本
  • python程序讲解
  • APP中javascript+css3实现下拉刷新效果
  • Python3使用requests包抓取并保存网页源码的方法
  • 漂亮的相片超好看的
  • 基于bootstrap的网站
  • 职称申报密码找回
  • 金税盘注销后怎么开发票
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设