fetch发送AJAX请求

最新推荐文章于 2023-07-25 08:05:24 发布

林之.

最新推荐文章于 2023-07-25 08:05:24 发布

阅读量87

点赞数

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

本文链接：https://blog.csdn.net/m0_51144154/article/details/121502126

版权

ajax 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

该博客介绍了如何通过fetch API发送AJAX请求，特别是在处理跨域请求时的设置。在server.js中，使用Express创建了一个简单的服务，设置了允许跨域的响应头。在fetch.html中，展示了fetch发送POST请求的过程，包括设置请求头和请求体。点击按钮触发请求，响应内容会被打印到控制台。

摘要由CSDN通过智能技术生成

fetch发送AJAX请求

1). server.js

//1.引入express
const express = require('express');

//2.创建应用对象
const app = express();

//3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装

//fetch服务
app.all('/fetch-server', (request, response) => {
    //'/server'就相当于一个url
    
        //设置响应头、设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')

    //设置接收所有相应头
    response.setHeader('Access-Control-Allow-Headers','*')
        
        //设置响应体
    const data = { name: '尚硅谷' };
    response.send(JSON.stringify(data));
});


//4.监听端口启动服务
app.listen(8000, () => {
    console.log('服务器已经启动，8000端口监听中...')
})

2). fetch.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fetch 发送 AJAX请求</title>
</head>
<body>
    <button>AJAX请求</button>
</body>
<script>
    const btn = document.querySelector('button');
    btn.onclick = function(){
        //请求参数也是可以直接在url中配置的
        fetch('http://127.0.0.1:8000/fetch-server?vip=99',{

            //请求方法
            method : 'POST',

            //请求头
            headers:{
                a:100,
                b:200,
            },

            //请求体,fetch请求体用的是body
            body:{
                username:'fetch方法',
                pw:'1234567',
            }
        }).then(response => {
            return response.text();
        }).then(response =>{
            console.log(response);
        })
    }
</script>
</html>

林之.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
fetch发送AJAX请求

fetch发送AJAX请求1). server.js//1.引入expressconst express = require('express');//2.创建应用对象const app = express();//3.创建路由规则//request 是对请求报文的封装//response 是对响应报文的封装//fetch服务app.all('/fetch-server', (request, response) => { //'/server'就相当于一个url
复制链接

扫一扫

专栏目录