位置: 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图表)

  • 色差仪维修生产(色差仪维修)(色差仪如何使用及维护)

    色差仪维修生产(色差仪维修)(色差仪如何使用及维护)

  • 小米civi支持无线充电吗(小米civi有没有无线充电)

    小米civi支持无线充电吗(小米civi有没有无线充电)

  • vivo x50 pro+屏幕刷新率是多少(vivox50pro屏幕是三星的吗)

    vivo x50 pro+屏幕刷新率是多少(vivox50pro屏幕是三星的吗)

  • qq电脑端自动回复如何删除(qq电脑怎么自动回复)

    qq电脑端自动回复如何删除(qq电脑怎么自动回复)

  • 手机号已有微信如何再申请一个(手机号已有微信号)

    手机号已有微信如何再申请一个(手机号已有微信号)

  • beatssolo3支持安卓吗(beatssolo3可以连安卓吗)

    beatssolo3支持安卓吗(beatssolo3可以连安卓吗)

  • 微信删除好友太频繁(微信删除好友太频繁,被限制了,多久可以恢复)

    微信删除好友太频繁(微信删除好友太频繁,被限制了,多久可以恢复)

  • 网线亮橙灯是什么意思(网线灯橙色闪烁怎么回事?)

    网线亮橙灯是什么意思(网线灯橙色闪烁怎么回事?)

  • 注销闲鱼账号影响淘宝吗(注销闲鱼账号会影响淘宝吗)

    注销闲鱼账号影响淘宝吗(注销闲鱼账号会影响淘宝吗)

  • 显卡风扇转显示器无信号(显卡风扇转显示器没反应)

    显卡风扇转显示器无信号(显卡风扇转显示器没反应)

  • 光信号闪红灯多久能好(光信号闪红灯多久能恢复正常)

    光信号闪红灯多久能好(光信号闪红灯多久能恢复正常)

  • 微信的发现面怎么设置(微信发现页怎么打开)

    微信的发现面怎么设置(微信发现页怎么打开)

  • qq会员和超级会员的区别(qq会员和超级会员一起开)

    qq会员和超级会员的区别(qq会员和超级会员一起开)

  • los红灯闪烁怎么办(los灯红灯闪烁不停)

    los红灯闪烁怎么办(los灯红灯闪烁不停)

  • 在ie8.0的地址栏中应当输入(在ie5.0的地址栏中,应当输入)

    在ie8.0的地址栏中应当输入(在ie5.0的地址栏中,应当输入)

  • 笔记本和台式机性能差多少(笔记本和台式机哪个性价比高)

    笔记本和台式机性能差多少(笔记本和台式机哪个性价比高)

  • airpods2可以连两个手机吗(airpods2可以连两个安卓手机吗)

    airpods2可以连两个手机吗(airpods2可以连两个安卓手机吗)

  • 抖音里面互相关注是什么意思(抖音里面互相关注的人为什么看不了他发的抖音)

    抖音里面互相关注是什么意思(抖音里面互相关注的人为什么看不了他发的抖音)

  • 3mp是多少像素(1080p是多少像素)

    3mp是多少像素(1080p是多少像素)

  • 京东评价买家怎么删除(京东 写评价)

    京东评价买家怎么删除(京东 写评价)

  • 苹果彻底删除照片恢复(苹果彻底删除照片)

    苹果彻底删除照片恢复(苹果彻底删除照片)

  • qq的文件怎么保存(qq的文件怎么保存到本地)

    qq的文件怎么保存(qq的文件怎么保存到本地)

  • 跨域问题及其解决方法(JSONP&CORS)(跨域问题是什么)

    跨域问题及其解决方法(JSONP&CORS)(跨域问题是什么)

  • 税务基本任务和稽查范围?
  • 民营医院所得税如何计算
  • 开普票的销项税额
  • 所得税季报利润总额
  • 物资采购账务处理方法
  • 应交税费应交增值税减免税款
  • 共同控制合营企业的合营者
  • 奖励给优质供应商会计处理怎么做?
  • 固定资产更换配件怎么界定是否满足资本化
  • 来料加工企业的会计处理问题
  • 个人经营所得核定征收超过多少要交税
  • 餐饮企业卖套餐赠送单品要交增值税吗?
  • 公司向个人借款利率最高多少
  • 汇算清缴应纳税所得额5万要交多少税
  • 合作社能否开具专用发票
  • 混业经营试点
  • 怎样算纳税人
  • 社保不报的情况下保险报销吗
  • 股权转让交的印花税怎么做会计分录
  • 收到社保补助不发放
  • 本月负数发票大于正数发票 留抵的增值税怎么做账
  • 非居民企业可以享受小微企业所得税优惠政策吗
  • 当月作废的发票是否需要报税
  • 银行贷款入公账怎么入分录?
  • 农业公司收到项目资金
  • 小区公共水电费要多少
  • 苹果屏幕刷新率120hz的机型
  • php页面传值
  • win10高级功能
  • 借条和欠条的区别 法律效力
  • 收到预付款计入什么科目
  • 只有收据没有发票是不是逃税
  • 基于php技术
  • php 反代
  • yii框架搜索分页modle写法
  • html零基础入门教程
  • 机器学习——BP神经网络详细介绍及案例Python代码实现
  • 导入vue.js
  • php fopen函数的用法
  • 残保金申报操作流程
  • 发票 加工费
  • 将织梦dedecms转换到wordpress
  • js中的对象种类有哪些
  • python的爬虫
  • CentOS 6.5 x64系统中安装MongoDB 2.6.0二进制发行版教程
  • 普通的增值税
  • 投资收益交增值税税率是多少
  • 上市公司收购其它公司是好是坏
  • 收缩数据库日志文件对数据有影响吗
  • 怎样备份mysql数据库
  • 预充值发票可以报销吗
  • 公司账户存定期利息
  • 医院工会费是什么
  • 公司自己搭建的房子出租可以按投资性房地产吗
  • 代扣税是不是社保
  • 预算会计年末如何结账
  • 税收罚款支出计算公式
  • 房地产一般纳税人可以不预缴增值税吗?
  • 小规模纳税人买车可以抵扣哪些税
  • 固定资产折旧完了怎么做账
  • ubuntul
  • sql2008数据库置疑
  • Windows Server 2016技术第三预览版10537英文版ISO镜像下载泄露
  • 如何去掉桌面图标的蓝底
  • mac识别文字软件
  • vi编辑器的三种模式
  • win7移动硬盘无法弹出
  • win10系统用正版有什么好处
  • [置顶]电影名字《收件人不详》
  • linux常用的帮助命令
  • Shell正则表达式获取指定字符串
  • unityz
  • python生成随机
  • 网管系统怎么用
  • unity点击3d物体
  • jquery日期选择器
  • google年会
  • 正外部性与负外部性的定义
  • 税务机关对核准类减免税的审核
  • 平板电脑购物
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设