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

  • 企业QQ被冻结/封号原因分析和解决的方法(企业qq冻结怎么解封)

    企业QQ被冻结/封号原因分析和解决的方法(企业qq冻结怎么解封)

  • 苹果11手机悬浮球在哪里设置关闭(苹果11手机悬浮球怎么设置)

    苹果11手机悬浮球在哪里设置关闭(苹果11手机悬浮球怎么设置)

  • 电脑为什么蓝屏怎么解决(电脑为什么蓝屏开不了机)

    电脑为什么蓝屏怎么解决(电脑为什么蓝屏开不了机)

  • honor7x怎么隐藏软件(honor7怎么隐藏软件)

    honor7x怎么隐藏软件(honor7怎么隐藏软件)

  • 易考通客户端打不开(易考通打不开怎么办)

    易考通客户端打不开(易考通打不开怎么办)

  • lpddr5内存是什么(lpddr内存是什么意思)

    lpddr5内存是什么(lpddr内存是什么意思)

  • 华为照片删除了最近删除里面也清空了怎么办(华为照片被永久删除了还能找到吗)

    华为照片删除了最近删除里面也清空了怎么办(华为照片被永久删除了还能找到吗)

  • 闹钟没有设置却天天响(闹钟没有设置却响了)

    闹钟没有设置却天天响(闹钟没有设置却响了)

  • 微信红包上限(微信红包上限是多少钱)

    微信红包上限(微信红包上限是多少钱)

  • 送话器自己能修复吗(送话器好修吗)

    送话器自己能修复吗(送话器好修吗)

  • 50兆可用1200m的路由器吗(50兆可以干嘛)

    50兆可用1200m的路由器吗(50兆可以干嘛)

  • 被收回的qq号能找回吗(已经被回收的qq号)

    被收回的qq号能找回吗(已经被回收的qq号)

  • 降频是什么意思(电脑降频是什么意思)

    降频是什么意思(电脑降频是什么意思)

  • ms dos属于什么系统(ms dos是什么格式)

    ms dos属于什么系统(ms dos是什么格式)

  • 为什么打不开企鹅电竞(为什么打不开企业微信直播)

    为什么打不开企鹅电竞(为什么打不开企业微信直播)

  • 电脑vt怎么开启(惠普电脑vt怎么开启)

    电脑vt怎么开启(惠普电脑vt怎么开启)

  • 苹果11pro屏幕多大(苹果11pro屏幕多少钱)

    苹果11pro屏幕多大(苹果11pro屏幕多少钱)

  • wps表格怎么搜索内容(wps表格怎么搜索文档里面的内容)

    wps表格怎么搜索内容(wps表格怎么搜索文档里面的内容)

  • 怎样领取微信收钱码(怎样领取微信收款的器具)

    怎样领取微信收钱码(怎样领取微信收款的器具)

  • ipad2018浮标设置在哪里(ipad浮标设置在哪里)

    ipad2018浮标设置在哪里(ipad浮标设置在哪里)

  • ns休眠会继续下载吗(ns休眠耗电吗)

    ns休眠会继续下载吗(ns休眠耗电吗)

  • 笔记本重置系统会怎样(笔记本重置系统后怎么操作)

    笔记本重置系统会怎样(笔记本重置系统后怎么操作)

  • 处理存储机密级秘密级的移动存储介质(处理存储机密级移动存储介质)

    处理存储机密级秘密级的移动存储介质(处理存储机密级移动存储介质)

  • 在Linux系统中安装web端的远程连接工具Wetty(在Linux系统中安装了一块虚拟磁盘大小的2G)

    在Linux系统中安装web端的远程连接工具Wetty(在Linux系统中安装了一块虚拟磁盘大小的2G)

  • js遍历map(js遍历map对象)(js map foreach遍历)

    js遍历map(js遍历map对象)(js map foreach遍历)

  • 最高超频纪录的主板是什么(目前超频最高几ghz)

    最高超频纪录的主板是什么(目前超频最高几ghz)

  • function 函数(function函数的定义)

    function 函数(function函数的定义)

  • 何谓关税
  • 电子税务局实名核验失败怎么回事啊
  • 人民币报关可以吗
  • 3%简易征收范围
  • 备用金可以不要发票吗
  • 兼职工资如何发放给个人
  • 增值税发票作废如何处理
  • 不征税收入的所得税处理
  • 亏损企业净资产负债率
  • 房地产企业借款过多的原因
  • 预付账款金额过大的原因
  • 印花税是按含税还是不含税缴
  • 办公室和电梯电梯哪个好
  • 员工工作服计入劳保费吗
  • 收到个人实收资本怎么做账
  • 法人可以公司账户存款吗
  • 委托加工物资什么意思
  • 认证成功次月何时补发
  • win11系统的电脑中拷贝到U盘中的文件没有了怎么解决
  • 挖机所有权需要办理什么手续吗
  • deepin如何
  • 金融资产终止确认是什么意思
  • vue app打包
  • laravel模板引擎
  • cuda运行环境
  • 税控系统的维护包括哪些内容
  • php面向对象是什么意思
  • php 5
  • 税务机关代小规模纳税人开发票
  • 国内旅客运输服务普票可以抵扣吗
  • nginx webservice
  • js获取本机ip地址
  • 中秋快乐的祝福语怎么说
  • return函数
  • 企业所得税应纳税所得额300万以下
  • 应交税费为负数在资产负债表里怎么填
  • 政府无偿划转股权 要做可行性研究
  • 利息收入可以冲减开发成本的法律依据
  • 法院判决后的利息
  • phpcms教程
  • 100%控股权什么意思
  • 计提工资后面附什么
  • mysql中事务的作用
  • 视同销售的增值税怎么申报
  • 普票和专票的
  • 会计记账凭证的填制要求
  • 摊余成本通俗易懂
  • 贷款用途不符合规定有啥危害
  • 什么单位需要
  • 公司购买汽车如何抵成本
  • 其他债权投资如何计提减值
  • 计提成本后如何冲回
  • 房屋租赁费属于变动成本吗
  • 开发票四舍五入
  • 设计费要计入固定成本吗
  • 只有进项发票没有销售发票这种怎么做账
  • 电脑买了四个月折旧多少
  • 编写sql需要注意什么
  • MySQL5.7 windows二进制安装教程
  • mysql获取今天数据
  • sql多条件组合条件的先后顺序
  • sqlserver2000数据库迁移到2008r2
  • windows server 2003安装域控制器的方法
  • win7一直弹广告怎么办
  • 安装 apt
  • win10 edge浏览器崩溃
  • ssh登录报错
  • linux的命令行界面
  • 引发脚本异常
  • java如何自定义函数
  • android studio环境
  • cshrc语法
  • unity备份工程
  • javascript教程推荐知乎
  • jquery实现二级联动菜单
  • javascript类库
  • 南阳市税务稽查局举报电话
  • 消费税的税收筹划ppt
  • 长治一诺代理记账公司
  • 如何进行税务筹划工作
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设