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

最新推荐文章于 2025-04-29 11:14:07 发布

吃不到棒棒糖的小熊

最新推荐文章于 2025-04-29 11:14:07 发布

阅读量1.5w

点赞数 1

分类专栏：前端文章标签：前端

本文链接：https://blog.youkuaiyun.com/m0_59897687/article/details/124346869

版权

前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍了fetch API的基础用法，包括如何发送GET和POST请求，并详细讲解了解决跨域问题的方法，强调了在服务器端设置Response Header以允许跨域访问的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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();
})