node的exprss框架后端处理跨域问题，然后js原生ajax发起请求

最新推荐文章于 2022-11-21 21:29:38 发布

前端筱攻城狮

最新推荐文章于 2022-11-21 21:29:38 发布

阅读量99

点赞数

分类专栏：前端文章标签： ajax跨域问题 js node.js

本文链接：https://blog.csdn.net/qq_26018335/article/details/118422536

版权

前端专栏收录该内容

41 篇文章 2 订阅

订阅专栏

本文介绍了如何在后端通过设置 CORS 头解决跨域问题，示例代码中展示了 Node.js 使用 Express 框架处理 GET 请求并允许所有源访问。同时，前端使用原生 JavaScript 发起 AJAX GET 请求，并处理响应数据。通过按钮点击触发请求，响应数据将显示在页面上。

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

没处理跨域前提示
跨域警告后端处理代码（只要加 res.setHeader(‘Access-Control-Allow-Origin’, ‘*’);允许所以源访问就可以了）

router.get('/test', function(req, res, next) {
    //设置响应头，设置允许跨域
    res.setHeader('Access-Control-Allow-Origin', '*');
    var sql = 'select * from blogs'
    db.query(sql, function(err, rows) {
        if (err) {
            console.log(err)
        } else {
            console.log(rows)
            res.send(rows)
        }
    });
});

前端通过原生js发起ajax请求

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX GET 请求</title>
    <style>
        #result {
            width: 100%;
            height: 100%;
            border: solid 1px #90b;
        }
    </style>
</head>

<body>
    <button>点击发送请求</button>
    <div id="result"></div>

    <script>
        //获取button元素
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById("result");
        //绑定事件
        btn.onclick = function() {
            //1. 创建对象
            const xhr = new XMLHttpRequest();
            //2. 初始化 设置请求方法和 url
            xhr.open('GET', 'http://localhost:3000/test');
            //3. 发送
            xhr.send();
            //4. 事件绑定 处理服务端返回的结果
            // on  when 当....时候
            // readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
            // 0表示未初始化
            // 1表示open方法调用完毕
            // 2表示send方法调用完毕
            // 3表示服务端返回了部分结果
            // 4.表示服务端返回了所有结果
            // change  改变
            xhr.onreadystatechange = function() {
                //判断 (服务端返回了所有的结果)
                if (xhr.readyState === 4) {
                    //判断响应状态码 200  404  403 401 500
                    // 2xx 成功
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //处理结果  行 头 空行 体
                        //响应 
                        // console.log(xhr.status);//状态码
                        // console.log(xhr.statusText);//状态字符串
                        // console.log(xhr.getAllResponseHeaders());//所有响应头
                        // console.log(xhr.response);//响应体
                        //设置 result 的文本
                        result.innerHTML = xhr.response;
                    } else {

                    }
                }
            }


        }
    </script>
</body>

</html>