Ajax请求数据四部曲 cors解决跨域问题

本文链接：https://blog.youkuaiyun.com/L_H_study/article/details/129018520

该文展示了如何使用HTML中的Ajax通过JavaScript发送GET请求到本地运行的Express.js服务器。服务器使用cors模块处理跨域问题，并监听3000端口。当用户点击按钮时，触发请求，服务器响应文本并更新页面内容。

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

html文件

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       <button id="btn">获取数据</button>
       <p id="cont"></p>

       <script>
           btn.οnclick=function(){
               alert('点击了')
               // 1.创建http请求对象
               var xhr=new XMLHttpRequest()
               // 2.打开服务器连接请求的接口
               xhr.open('get','http://127.0.0.1:3000/index',true)
               // 3.添加事件服务器有响应自动触发函数
               xhr.οnlοad=function(){
                   console.log(xhr.responseText);
                   cont.innerHTML=xhr.responseText
               }
               // 4.向服务器发送请求
               xhr.send()
           }
       </script>
   </body>
</html>

js文件

// 引入模块
const express=require('express')
// 引入模块解决跨域
const cors=require('cors')
// 创建服务器
const app=express()
// 使用模块
app.use(cors())
// 设置端口
app.listen(3000,()=>{
   console.log('启动成功');
})
// 托管静态资源
app.use(express.static('./public'))
app.use(express.urlencoded({
   extended:true
}))
// 添加路由
app.get('/index',(req,res)=>{
   res.send('这是首页')
})