Ajax发送请求后，Response响应体返回JavaScript页面源代码

最新推荐文章于 2022-11-03 19:23:08 发布

Amor yu

最新推荐文章于 2022-11-03 19:23:08 发布

阅读量2k

点赞数

分类专栏：前端攻克心得总结 Ajax 文章标签：前端

本文链接：https://blog.csdn.net/weixin_62347266/article/details/123856775

版权

前端攻克心得总结同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

Ajax

1 篇文章 0 订阅

订阅专栏

在学习Ajax请求的发送接收时，发现在发送Ajax请求后, 响应体中出现跨域错误，CROS-Origin-Resource- Sharing error: PreflightMissingAllowOriginHeader错误

在查阅资料发现，是因为发送Ajax请求按钮的HTML页面是3000端口，接收Ajax请求的异步对象处于8000端口，所以出现了跨域错误

并且由于是通过GET方式发送Ajax请求，省略掉了请求头的设置，从而导致错误的出现

    <script>
        const result = document.getElementById('res');
        const btn = document.querySelector('button');
        btn.onclick = function () {
            const xhr = new XMLHttpRequest();

            xhr.open('GET', 'http://127.0.0.1:8000/server');
            //设置请求头为允许跨域
            xhr.setRequestHeader("Origin", "Access-Control-Allow-Origin");    
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        console.log(xhr.getAllResponseHeaders());
                        result.innerHTML = xhr.response;
                    }
                }
            }
        }

    </script>

最后，在XMLHttpRequest对象中，设置请求头为允许跨越，问题解决