发布时间:2023-09-19 12:30
在前端发出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,说完发生跨域问题的情况,我们接下来讲解决方法:
这个方法很简单只要在后端加入两行代码。(首先要先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, // 需要响应给客户端的数据
});
})
我们发现当我们使用了cors中间件之后,使用浏览器抓包,可以看到相应头里确实有了这个字段
所以综上所述,cors中间件就是帮我们自动设置了响应头,从而解决跨域问题。
简单来说,JSONP就是通过前端的script脚本从后端请求回来一段js代码并且执行从而获得数据,前端代码如下(视频截图下来的。。我懒得打字了)。。然后圈个重点JSONP只支持GET请求
来,我们解释一下:首先通过第一个script脚本注册一个函数f,那么这个函数自然就存在了,后面使用的脚本也能用f这个函数,这个道理和你用script引入一个jquery然后后面用 $ 开始一通操作是一样的道理。然后第二个script脚本访问一个跨域的资源,然后我们传入参数callback=f,这个参数有什么用呢?答:后端需要获取这个callback参数里面的值,然后把这个值(也就是f)拼接成一个函数然后返回回来给前端执行,对应后端代码如图。
前端代码:
后端代码:可以看到这个funcname对应的就是那个f,然后拼接一下就变成了f('你好'),那么这个东西就返回给了前端。但是但是前端这个时候注册了一个f函数呀,所以就会执行这个f('你好'),那么前端的数据也就请求回来了。
直接上代码:(后端代码不变,还是拼接一个函数回来执行)
$("#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请求把。
好了吃饭去了~
Spring框架系列(2) - Spring简单例子引入Spring要点
EventBridge 在 SaaS 企业集成领域的探索与实践
SQL中row_number() over(partition by)的用法说明
Pytorch中DataLoader和Dataset的基本用法
【Linux】文件的权限管理及特殊属性-粘滞位(sticky bit)概述
110.网络安全渗透测试—[权限提升篇8]—[Windows SqlServer xp_cmdshell存储过程提权]
第四篇:mmpose之各类Demo测试及自定义数据原理(强推)
论文阅读-目标检测(2019)-CenterNet:目标检测转化为关键点检测及其属性回归
基于Netty,从零开发IM(二):编码实践篇(im单聊功能)