express使用cros解决跨域问题

最新推荐文章于 2024-06-19 23:43:09 发布

这是可拉可拉

最新推荐文章于 2024-06-19 23:43:09 发布

阅读量377

点赞数

文章标签： express javascript 前端

本文链接：https://blog.csdn.net/weixin_53623025/article/details/130887304

版权

文章介绍了浏览器的同源策略导致的跨域问题，并提供了两种解决方案：CORS和JSONP。重点讲述了如何使用CORS来解决，通过创建一个简单的HTML页面，使用jQuery的ajax方法发送GET和POST请求。同时展示了在服务器端使用Express设置CORS中间件的步骤，以及模块化路由处理GET和POST请求的方法。

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

浏览器为了安全设置了“同源策略”

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。

一般解决跨域有两种方式，一种是cros，一种是jsonp

在学习中我们可以使用cros解决跨域问题

先创建一个有两个按钮的网页，一个按钮是发送get请求，一个是发送post请求

导入jquery的在线包，使用jquery方法发送ajax

<!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>
<!-- 导入在线jquery -->
    <script src="https://cdn.staticfile.org/jquery/3.7.0/jquery.min.js"></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:'ls'
                    },
                    success:function(res){
                        console.log(res)
                    }
                })
            })

            $('#btnPOST').on('click',function(){
                $.ajax({
                    type:'POST',
                    url:'http://127.0.0.1/api/post',
                    data:{
                        name:'zs'
                    },
                    success:function(res){
                        console.log(res)
                    }
                })
            })
        })
    </script>
</body>
</html>

然后我们创建服务器

const express = require('express')
const app = express()

/*
第三方中间件
urlencoded
跨域
cros 
*/
app.use(express.urlencoded({extended:false}))
const cros = require('cors')
app.use(cros())


// 导入路由模块
const router = require('./router')

app.use('/api',router)



app.listen(80,()=>{
    console.log('express runing at 127.0.0.1:80')
})

用模块化创建路由

const express = require('express')
const router = express.Router()

// 模块化路由
router.get('/get',(req,res)=>{
    const query = req.query
    res.send({
        status:0,
        msg:'success',
        data:query
    })
})

router.post('/post',(req,res)=>{
    const body = req.body
    res.send({
        status:0,
        msg:'success',
        data:body
    })
})
// 将路由暴露
module.exports = router

在浏览器中点击按钮之后就可以得到

这样我们就用cros解决跨域问题了

主要三步：

安装cros，npm i cros

导入cros，const cros = require('cros')

使用cros，app.use(cros())

这是可拉可拉

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
express使用cros解决跨域问题

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。先创建一个有两个按钮的网页，一个按钮是发送get请求，一个是发送post请求。导入cros，const cros = require('cros')一般解决跨域有两种方式，一种是cros，一种是jsonp。使用cros，app.use(cros())在学习中我们可以使用cros解决跨域问题。这样我们就用cros解决跨域问题了。安装cros，npm i cros。
复制链接

扫一扫