Node.js随笔----CORS解决跨域问题

最新推荐文章于 2024-04-23 12:30:00 发布

睡不着还睡不醒

最新推荐文章于 2024-04-23 12:30:00 发布

阅读量1k

点赞数

文章标签： node.js 前端 javascript

本文链接：https://blog.csdn.net/Father_Of_Soft/article/details/127696471

版权

cors是Express的一个第三方中间件，通过安装和配置cors中间件，可以很方便地解决跨域问题

使用步骤分为三步：

①使用npm install cors 安装中间件

②使用const cors=require('cors'); 导入中间件

③在路由之前调用app.use(cors()) 配置中间件

黑马程序员Node.js cors跨域实例：

const express=require('express');

const router=express.Router();

router.get('/get',(req,res)=>{
    const query=req.query;

    res.send({
        statu:0,
        msg:'GET请求成功！',
        data:query
    })
})

router.post('/post',(req,res)=>{
    const body=req.body;
    res.send({
        status:0,
        msg:'POST请求成功！',
        data:body
    })
})

module.exports=router;

const express=require('express');

const cors=require('cors');

const app=express();

app.use(cors());

app.use(express.urlencoded({extended:false}));



const router=require('./apiRouter');

app.use('/api',router);

app.listen(80,()=>{
    console.log('Express Server is running at http://127.0.0.1');
})

<!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>Document</title>
    <script src="https://cdn.staticfile.org/jquery/3.6.1/jquery.js" type="text/javascript"></script>
</head>
<body>
    <button id="btnGET">GET</button>
    <button id="btnPOST">POST</button>
    <script>
        $(function(){
            $('#btnGET').on('click',function(){
                $.ajax({
                    type:'GET',
                    url:'http://127.0.0.1/api/get',
                    data:{
                        name:'zs',
                        age:20
                    },
                    success:function(res){
                        console.log(res);
                    }
                })

            $('#btnPOST').on('click',function(){
                $.ajax({
                    type:'POST',
                    url:'http://127.0.0.1/api/post',
                    data:{
                        bookName:'水浒传',
                        author:'施耐庵'
                    },
                    success:function(res){
                        console.log(res)
                    }
                })
            })
            })
        })
    </script>
</body>
</html>

运行截图：