位置: IT常识 - 正文

解决前端跨域的几种方法(前端解决跨域问题的8种方案(最新最全))

编辑:rootadmin
解决前端跨域的几种方法

推荐整理分享解决前端跨域的几种方法(前端解决跨域问题的8种方案(最新最全)),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端解决跨域问题的8种方案(最新最全),前端解决跨域问题的8种方案(最新最全),前端解决跨域问题的8种方案(最新最全),前端跨域产生的原因和解决方法,前端跨域问题解决办法,前端解决跨域问题的8种方案(最新最全),解决前端跨域的问题,前端解决跨域的几种办法,内容如对您有帮助,希望把文章链接给更多的朋友!

一、跨域报错

        在我们实际开发过程中,都有遇到过跨域的问题,跨域报错如下:

二、为什么会报跨域?

        跨域的本质是浏览器基于同源策略的一种安全手段,主要是考虑到用户的信息安全。何为同源策略呢?同源策略是一种约定,它是浏览器最核心也最基本的安全功能。所谓同源(即指在同一个域)具有以下三个相同点:协议相同、域名相同、端口相同。

        反之非同源请求,也就是协议、端口、主机其中一项不相同的时候,这时候就会产生跨域。跨域是浏览器的限制,拦截的是响应而非请求。我们用抓包工具抓取接口数据,可以看到接口已经把数据返回来了,只是由于浏览器的限制我们获取不到数据。另外,并不是所有的跨域都会有问题,只有ajax和fetch产生的跨域才会被浏览器限制。

三、如何解决跨域?

(1)JSONP

        JSONP是一种比较古老的解决方案,这种方案没有兼容性问题,基本都可以使用,但是它所解决的问题比较有限,且对服务端接口有一定的要求,只支持get请求,不支持post,请求回来的东西当做js来执行。

        原理:JSONP本质上使用的是script标签的src属性,该标签有跨域请求资源的能力,且请求的资源类型是js脚本。也就是说,我们需要在服务器给返回一段js脚本,并且把要返回给前端的数据加入到这段js脚本中。在浏览器端执行这段脚本,从而达到获取数据的目的。

解决前端跨域的几种方法(前端解决跨域问题的8种方案(最新最全))

(2)CORS

        CORS是 W3C 标准,属于跨源 ajax请求的根本解决方法。CORS 规范中,清楚定义了跨域存取控制的运作方式。首先,服务端需要在响应头中加上如Access-Control-Allow-Origin、Access-Control-Request-Method、Access-Control-Request-Headers 等设定,来限制服务器所能接受的来源、请求的方法、可携带的头等等。

        当浏览器发送资源请求时,如果是简单请求便会直接送出请求;若不符合前述条件,则会通过预检请求,确认是否可以通过服务器的限制,然后才会发送正式的请求。

        简单说,该方法只需要直接让后端设置响应头,允许资源共享就ok了,前端不需要做额外修改。

(3)Proxy

        浏览器是禁止跨域的,但是服务端不禁止。拿Vue项目说,在本地运行npm run dev等命令时实际上是用node运行了一个服务器,因此proxyTable实际上是将请求发给自己的服务器,再由服务器转发给后台服务器,做了一层代理,因此不会出现跨域问题。

        Vue-cli脚手架, 就启动了一个webpack开发服务器, 它就能做代理转发,我们只需要修改webpack开发服务器的配置即可。

Vue.config.js:

        总结一下就是,在前端服务和后端接口服务之间 架设一个中间代理服务,它的地址保持和前端服务一致,那么,代理服务和前端服务之间由于协议、域名、端口三者统一不存在跨域问题,可以直接发送请求;代理服务和后端服务之间由于并不经过浏览器,没有同源策略的限制,也可以直接发送请求。这样,我们就可以通过中间这台服务器做接口转发,在开发环境下解决跨域问题,看起来好像挺复杂,其实vue-cli已经为我们内置了该技术,我们只需要按照要求配置一下即可。

当然,解决跨域的方法不止这些,比如nginx反向代理等方式也可以解决跨域问题。大家可以结合实际采取最简洁方便的方式。

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

上一篇:19个可用的天气和气候数据集(有哪些天气软件)

下一篇:【HTML】HTML网页设计----动漫网站设计(html的网址)

  • 印花税计入税金及附加还是应交税费
  • 公司收到生育津贴不发给员工 分录
  • 小规模超过10万是全额交税吗
  • 什么是外购类标签
  • 技术服务费属于哪个商品编码
  • 固定资产加速折旧税收优惠政策
  • 申报表季初资产和季末资产
  • 非税收入如何审查
  • 保险赔款个人所得税计算
  • 经营租赁的资产应计入哪里
  • 事业基金减少原因一般是什么
  • 进项转出后还能转入吗
  • 公户收到的款都要确定收入吗
  • 行政单位办公室主任必须是党员吗
  • 5%征收率的适用范围
  • 现金流量表借款还了流入和流出可以抵消吗
  • 企业只有收入没有支出是否违规
  • 如果公司没有报税
  • 营改增后发票上必须要开具税收分类编码吗?
  • 离线发票在哪里查看
  • 分期付款股权转让
  • 物流公司的保险服务属于什么费用
  • 多交税款退税怎么做账
  • 企业筹建期购买设备是否可以扣除
  • 普通发票要写增值税吗
  • 出口货物国际运输流程图
  • 小规模纳税人增值税免税政策
  • 房地产开发企业建造的商品房,在出售前
  • win10开机黑屏几秒
  • 失控发票的企业怎么处理
  • 印花税计提与缴税的区别
  • linux怎么打开makefile
  • 材料发票入账
  • 免抵退税额是什么
  • linux 书 推荐
  • 支付第三方劳务派遣费用如何做账
  • 最贵的电脑键盘
  • vue input value
  • 附加税申报错误,已缴费,怎么办
  • 申请减免费用的报告格式
  • devtools安装mac
  • word2vec使用方法
  • ps的cc和sp
  • php windows
  • 预缴税款怎么做会计分录
  • 员工体检费发票可以抵扣进项吗
  • mysql 服务器配置
  • 增值税小规模纳税人减免增值税政策
  • 一般纳税人认定管理办法
  • 用友怎么取消对账结果
  • 金蝶可以自动结转增值税吗
  • 会计的借记和贷记什么意思
  • mysql中游标的作用
  • 出票后定期付款的汇票,其提示付款的期限为
  • 同一控制下合并报表恢复留存收益
  • 企业收到退税款在年报怎么填
  • 付款金额与增值金额区别
  • 企业代办业务有哪些
  • 哪些业务可以开专票
  • 母公司给子公司担保
  • 日常费用报销流程是什么样的?
  • 管理费用标准制定
  • linux如何安装c语言编译器
  • system is boot up with
  • linux系统的主要功能
  • win10周年更新版是什么意思
  • win10访问局域网电脑需要用户名和密码
  • linux-c
  • 任务管理器快捷键ctrl+alt+
  • rsmsink.exe - rsmsink是什么进程 有何作用
  • surface准备就绪
  • cocos3d物理引擎
  • 环境搭建怎么写
  • node.js连接mysql的数据怎么可视化
  • python,数组
  • node.js中的http.response.setHeader方法使用说明
  • 详解使用Visual Studio Code对Node.js进行断点调试
  • 互联网巨头bat有哪些
  • 地域税收收入增长原因
  • 地税局跟税务局有什么区别
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设