当前位置：首页 > news >正文

【Ajax】笔记-设置CORS响应头实现跨域

news 2025/7/27 16:33:28

CORS

CORS

CORS是什么？

CORS(Cross-Origin Resource Sharing),跨域资源共享。CORS是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get和post请求。跨域资源共享标准新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源
在这里插入图片描述

CORS怎么工作的？

CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。

CORS的使用

主要是服务端的设置：

roter.get("/testAJAX",function(req,res){//通过 res 来设置响应头，来允许跨域请求//res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000");res.set("Access-Control-Allow-Origin","*");res.send("testAJAX 返回的响应")
});

前端

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CORS</title><style>#result{width:200px;height:100px;border:solid 1px #90b;}</style>
</head>
<body><button>发送请求</button><div id="result"></div><script>const btn = document.querySelector('button');const result = document.getElementById("result");btn.onclick = function(){//1. 创建对象const x = new XMLHttpRequest();//2. 初始化设置x.open("GET", "http://127.0.0.1:8000/cors-server");//3. 发送x.send();//4. 绑定事件x.onreadystatechange = function(){if(x.readyState === 4){if(x.status >= 200 && x.status < 300){//输出响应体console.log(x.response);result.innerHTML=x.response;}}}}</script>
</body>
</html>

服务

app.all('/cors-server', (request, response)=>{//设置响应头response.setHeader("Access-Control-Allow-Origin", "*");response.setHeader("Access-Control-Allow-Headers", '*');response.setHeader("Access-Control-Allow-Method", '*');// response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");response.send('hello CORS');
});