ajax跨域（cors）

官方跨域方案支持所有跨域请求包括get，post等原理：cors通过设置一个响应头来告诉浏览器，该请求允许跨域

app.all('/cos-serve',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin', '*');//允许跨域
    response.setHeader('Access-Control-Allow-Headers', '*');//允许自定义响应头
    response.setHeader('Access-Control-Allow-Methods', '*');//允许使用任意响应方法
    response.send('hello cors');
})

1
2
3
4
5
6

重点就是上面设置的响应头信息

<body>
    <button>发送请求</button>
   <div class="result"></div> 
   <script>
       let result=document.querySelector('.result');
       let btn=document.querySelector('button');
       btn.onclick=function(){
           let xhr=new XMLHttpRequest();
           xhr.open('GET','http://127.0.0.1:8000/cos-serve');
        xhr.send();
        xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    // 继续判断响应状态 200 404 403 401 500,2开头表示成功
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // 处理结果
                        // result.innerHTML = xhr.response;
                        result.innerHTML = xhr.response
                    }
                }
            }
       }
   </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

编辑

上次更新: 2023/7/11 18:57:41

← 原生jsonp ajax跨域（jsonp）→