位置: IT常识 - 正文

前端跨域问题的解决方案Access to XMLHttpRequest at ‘http..’ from origin ‘null‘ has been blocked by CORS policy(前端跨域的方法)

编辑:rootadmin
前端跨域问题的解决方案Access to XMLHttpRequest at ‘http..’ from origin ‘null‘ has been blocked by CORS policy 前言:

推荐整理分享前端跨域问题的解决方案Access to XMLHttpRequest at ‘http..’ from origin ‘null‘ has been blocked by CORS policy(前端跨域的方法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端跨域的几种解决方式,前端跨域的解决方法,前端跨域的几种方式,前端跨域的几种方式,前端跨域的解决方案,前端跨域的方法,前端跨域问题的解决方法,前端跨域问题的解决方法,内容如对您有帮助,希望把文章链接给更多的朋友!

在前端发出Ajax请求的时候,有时候会产生跨域问题,报错如下:

Access to XMLHttpRequest at 'http://127.0.0.1/api/post' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

针对以上问题,本文提供两种解决方案,CORS中间件和JSONP方法。

在具体介绍解决方法之前,我们先明确以下前提条件:

1、这两个方法都需要通过后端修改接口情况,无法单独通过前端解决跨域问题。

2、什么是跨域?什么情况会出现跨域?

答:当浏览器发起Ajax请求时,如果所请求的url和当前的url的协议、域名、端口存在任意不同,就会产生跨域问题。比如我在这个地址file:///C:/Users/%E8%8A%.html,协议为file协议,如果请求http协议的文件,自然就会出现跨域问题。

3、当我们使用script、img、herf加载内容时不会出现跨域问题

好,接来下我们先给出出现问题的前 后端代码,看看这个时候对应前后端都做了什么事:

首先是前端:使用ajax发送get请求,请求地址为http://127.0.0.1/api/get,由于前端页面使用file格式打开,所以在请求http协议的本机地址是会产生跨域问题。

$("#btnGET").on("click", function () { $.ajax({ type: "GET", url: "http://127.0.0.1/api/get", success: function (res) { console.log(res); }, }); });

然后是后端:当请求的路由地址为/api/get的时候,返回对应的内容和query属性

app.get('/api/get',(req, res) => { // 通过 req.query 获取客户端通过查询字符串,发送到服务器的数据 const query = req.query; // 调用 res.send() 方法,向客户端响应处理的结果 res.send({ status: 0, // 0 表示处理成功,1 表示处理失败 msg: "GET 请求成功!", // 状态的描述 data: query, // 需要响应给客户端的数据 });})

OK,说完发生跨域问题的情况,我们接下来讲解决方法:

方法一:引入cors中间件

这个方法很简单只要在后端加入两行代码。(首先要先npm install cors 安装包),修改后的后端代码如下

const cors = require("cors");app.use(cors()); //使用cors中间件app.get('/api/get',(req, res) => { // 通过 req.query 获取客户端通过查询字符串,发送到服务器的数据 const query = req.query; // 调用 res.send() 方法,向客户端响应处理的结果 res.send({ status: 0, // 0 表示处理成功,1 表示处理失败 msg: "GET 请求成功!", // 状态的描述 data: query, // 需要响应给客户端的数据 });})

可以看到,引入了cors中间件之后,跨域问题可以得到解决,那么为什么解决,这么解决的原理是什么呢?让我们回到前面的报错内容:

 No 'Access-Control-Allow-Origin' header is present on the requested resource.意思就是说,所请求的资源没有Access-Control-Allow-Origin这个头,好的。那我们就把这个头给他安上,发现问题也可以解决,那么cors中间件是不是就是使用的这种方法呢?

app.get('/api/get',(req, res) => { // 通过 req.query 获取客户端通过查询字符串,发送到服务器的数据 res.header("Access-Control-Allow-Origin", "*"); 设置响应头,*表示任何地址都亦可以访问 const query = req.query; // 调用 res.send() 方法,向客户端响应处理的结果 res.send({ status: 0, // 0 表示处理成功,1 表示处理失败 msg: "GET 请求成功!", // 状态的描述 data: query, // 需要响应给客户端的数据 });})前端跨域问题的解决方案Access to XMLHttpRequest at ‘http..’ from origin ‘null‘ has been blocked by CORS policy(前端跨域的方法)

我们发现当我们使用了cors中间件之后,使用浏览器抓包,可以看到相应头里确实有了这个字段

 所以综上所述,cors中间件就是帮我们自动设置了响应头,从而解决跨域问题。

方法二:JSONP

简单来说,JSONP就是通过前端的script脚本从后端请求回来一段js代码并且执行从而获得数据,前端代码如下(视频截图下来的。。我懒得打字了)。。然后圈个重点JSONP只支持GET请求

来,我们解释一下:首先通过第一个script脚本注册一个函数f,那么这个函数自然就存在了,后面使用的脚本也能用f这个函数,这个道理和你用script引入一个jquery然后后面用 $ 开始一通操作是一样的道理。然后第二个script脚本访问一个跨域的资源,然后我们传入参数callback=f,这个参数有什么用呢?答:后端需要获取这个callback参数里面的值,然后把这个值(也就是f)拼接成一个函数然后返回回来给前端执行,对应后端代码如图。

前端代码:

 后端代码:可以看到这个funcname对应的就是那个f,然后拼接一下就变成了f('你好'),那么这个东西就返回给了前端。但是但是前端这个时候注册了一个f函数呀,所以就会执行这个f('你好'),那么前端的数据也就请求回来了。

到这里,两种方法都讲完了,下面补充一种让我懵逼了很久的jquery的jsonp解决方法

直接上代码:(后端代码不变,还是拼接一个函数回来执行)

$("#btnJSONP").on("click", function () { $.ajax({ type: "GET", url: "http://127.0.0.1/api/jsonp", dataType: "jsonp", jsonp: "callback", jsonpCallback: "f", success: function (res) { console.log(res); }, }); });

 打开控制台,可以看到jquery发送的这个请求其实和刚才是差不多的

 同样是拼接了一个callback参数给后端,后端返回js代码,此外呢,上面这段代码的jsonp参数和jsonpcallback参数书可以省略的,那样的话jquery会自动给你贴一个值

 

同时后端返回来的也就不再是那个f函数了。 

那么问题又来了,不是说ajax请求就会出现跨域问题,那为什么我这个用ajax发送jsonp请求就没有跨域呢?

答:我也不知道。然后就去查了一下jquery的文档。

 

所以大概是因为没有用到XMLhttprequest这个对象,所以并不算一个真正的ajax请求把。

好了吃饭去了~ 

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

上一篇:达拉斯分水岭, 科罗拉多州西南部 (© Ronda Kimbrow/Shutterstock)(达拉斯位置)

下一篇:超详细纯前端导出excel并完成各种样式的修改(xlsx-style)(前端gui)

  • 怎样利用百度经验做网络推广(怎样利用百度经验赚钱)

    怎样利用百度经验做网络推广(怎样利用百度经验赚钱)

  • 苹果手机开视频切出去就不见人了(苹果手机开视频模糊怎么回事)

    苹果手机开视频切出去就不见人了(苹果手机开视频模糊怎么回事)

  • 电子word文档怎么弄(电子word文档怎么弄表格)

    电子word文档怎么弄(电子word文档怎么弄表格)

  • 三星s10信号不好怎么解决(三星s10e信号不太好)

    三星s10信号不好怎么解决(三星s10e信号不太好)

  • 手机屏幕为什么会烧屏(手机屏幕为什么突然变暗)

    手机屏幕为什么会烧屏(手机屏幕为什么突然变暗)

  • 小米10pro有微距吗(小米10pro有微距摄像头吗)

    小米10pro有微距吗(小米10pro有微距摄像头吗)

  • 怎样把喜欢的歌曲设置成来电铃声(怎样把喜欢的歌设置来电铃声)

    怎样把喜欢的歌曲设置成来电铃声(怎样把喜欢的歌设置来电铃声)

  • 微信拉黑一个人聊天记录会消失吗(微信拉黑一个人怎么拉黑)

    微信拉黑一个人聊天记录会消失吗(微信拉黑一个人怎么拉黑)

  • 全民k歌可以上传本地录音吗(全民K歌可以上传网易云音乐吗)

    全民k歌可以上传本地录音吗(全民K歌可以上传网易云音乐吗)

  • 华为充电器二维码扫不出来(华为充电器二维码)

    华为充电器二维码扫不出来(华为充电器二维码)

  • 手机正常耗电速度(手机正常耗电速度是多少)

    手机正常耗电速度(手机正常耗电速度是多少)

  • qq后面有个帆船标志(qq后面有个帆船是什么意思)

    qq后面有个帆船标志(qq后面有个帆船是什么意思)

  • 芒果tvhd是什么意思(芒果tvhd和芒果tv会员)

    芒果tvhd是什么意思(芒果tvhd和芒果tv会员)

  • 快手降权了多久能恢复(快手降权了找谁可以解决)

    快手降权了多久能恢复(快手降权了找谁可以解决)

  • 红米note8电池容量多大(redmi note8电池)

    红米note8电池容量多大(redmi note8电池)

  • APP开发体验如何提升(app开发入门)

    APP开发体验如何提升(app开发入门)

  • 微信怎么设置锁屏手势密码(微信怎么设置锁屏也能收到信息和语音通话)

    微信怎么设置锁屏手势密码(微信怎么设置锁屏也能收到信息和语音通话)

  • 华为dlg一tl10是什么型号(华为lldtl10什么价钱)

    华为dlg一tl10是什么型号(华为lldtl10什么价钱)

  • 查看电脑Internet Explorer浏览器版本(查看电脑系统版本)

    查看电脑Internet Explorer浏览器版本(查看电脑系统版本)

  • 安装win7系统提示Output error file to following location的原因及解决方法(装win7提示失败怎么办)

    安装win7系统提示Output error file to following location的原因及解决方法(装win7提示失败怎么办)

  • NLP:自然语言处理技术领域的代表性算法概述(技术迭代路线图/发展时间路线)、四大技术范式变迁概述(统计时代→大模型时代)、四个时代的技术方法论探究(少数公司可承担的训练成本原因)之详细攻略(nlp自然语言处理框架)

    NLP:自然语言处理技术领域的代表性算法概述(技术迭代路线图/发展时间路线)、四大技术范式变迁概述(统计时代→大模型时代)、四个时代的技术方法论探究(少数公司可承担的训练成本原因)之详细攻略(nlp自然语言处理框架)

  • 进口增值税的计税价格为
  • 小规模纳税人可以开数电专票吗
  • 未抵扣的进项发票是什么意思
  • 财务费用中的汇兑收益增加的原因
  • 应交税费增值税明细账
  • 应收账款余额百分比法是什么意思
  • 销货清单是否需盖章
  • 自行建造固定资产中的自营工程,在领用工程物资
  • 子公司给总公司开发票
  • 企业亏损会影响利润吗
  • 交易性金融资产入账价值怎么计算
  • 其他综合收益是利润表项目吗
  • 居民纳税人具体包括哪些?
  • 小规模纳税人简易计税方法
  • 营业账簿印花税包括什么
  • 燃油税改革了谁的钱包
  • 为什么非征期不允许汇总上传
  • 财税政策是什么
  • 物流公司承担货物损失赔偿如何写会计分录
  • 季度保税企业所得税申报的逾期申报怎么办?
  • 企业注销时未分配利润怎么处理
  • 出租设备的折旧计入哪个科目
  • 收到预收款项
  • 如何冲回以前年度账户
  • 设计费要计入固定费用吗
  • win11闪屏问题
  • 前端获取当前地址
  • win 10有什么用
  • win10专业版用户名和密码怎么取消
  • 总公司人员的工资子公司可以发吗
  • win10电源和睡眠设置不起作用
  • 安博塞利国家公园狮子
  • linuxweb服务器搭建教程
  • vue修改表格数据
  • 资产减值损失影响当期利润吗
  • 工会经费和残保金的缴纳比例
  • 公司购垃圾袋怎么做账
  • 维保服务的税率是多少
  • php编译器与集成环境怎么安装
  • 全网首发是什么意思
  • 残疾证哪里发
  • 员工意外伤害保险最多赔多少
  • 织梦cms官网
  • 为什么盈余公积减少,未分配利润增加
  • linux mongodb创建用户
  • 银行日记账期初余额写哪儿
  • 出口企业有哪些税收
  • 销售商品房适用的增值税税率是多少
  • 未付货款尾款会计分录
  • 收款收据可以用于财务报账吗
  • 外币账户结汇至人民币账户
  • 用友反结账怎么操作
  • 取现发放劳务费怎么做账
  • 承兑汇票贴现利息会计分录
  • 制造费用是借还是贷
  • 废料卖出算哪种收入
  • 损益平准金是什么会计科目
  • 行程单如何验真伪
  • 技术转让要交所得税吗
  • 企业对财会人员的要求
  • 内帐与外帐的哪个更好
  • 私营企业固定资产法律制度
  • 必须会的sql语句有哪些
  • centos还原
  • windows共享文件夹端口号
  • xp移动系统
  • macbookpro客人用户
  • centos搭建服务器
  • win8.1快速启动
  • win7断电后无法正常启动
  • k mean python
  • Unity3D游戏开发基础
  • 批处理禁用计算机
  • java script和java区别
  • javascript操作网页
  • python 下载一个网站上的所有文档
  • python读dat数据
  • 快速学会java
  • 生猪屠宰企业报价
  • 增值税专用发票怎么开
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设