首页 > 其他分享 >Fetch发送请求 + 解决跨域问题

Fetch发送请求 + 解决跨域问题

时间:2022-09-28 13:46:04浏览次数:55  
标签:function 跨域 text response 发送 Fetch fetch 请求

 

 

 

 

 

解决跨域问题:

fetch()方法提供了一种简单,合理的方式来跨网络异步获取资源。

可以使用fetch向服务器发送get请求或post请求来获取数据

fetch的基本用法:
fetch('/url').then(data=>{
return data.text();
}).then(ret=>{
//注意,这里才是得到的最终数据
console.log(ret);
});
使用fetch发送get请求:
把参数拼接在url中传递过去

text():将返回体处理成字符串类型

json():返回结果和JSON.parse(responseText)一样

fetch('http://localhost:3001/user/login?username='+zhanghao+'&&password='+mima)
.then(function (response) {
return response.text();
})
.then(function (myJson) {
alert(myJson);
});
使用fetch发送post请求:
fetch('http://localhost:3001/admin/add', {
method: 'post',
body:JSON.stringify(obj),
headers:{
'Content-Type': 'application/json'
}
})
.then(function (response) {
return response.text();
})
.then(function (myJson) {
alert(myJson);
});
解决跨域问题:
在服务器端添加 Response Header

如果服务器返回的 response 头包含 “Access-Control-Allow-Origin:*” 或者 *为与请求源相同的地址。即服务器支持浏览器跨域访问。

app.all("*",function(req,res,next){

res.header("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type");

next();
})

————————————————
版权声明:本文为CSDN博主「吃不到棒棒糖的小熊」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/m0_59897687/article/details/124346869

标签:function,跨域,text,response,发送,Fetch,fetch,请求
From: https://www.cnblogs.com/waw/p/16737743.html

相关文章