【跨域问题解决】Access to XMLHttpRequest at xxx from origin xxx has been blocked by CORS

最新推荐文章于 2025-05-21 13:30:00 发布

逆旅行天涯

最新推荐文章于 2025-05-21 13:30:00 发布

阅读量1.3k

点赞数 12

CC 4.0 BY-SA版权

分类专栏：前端学习文章标签：前端

本文链接：https://blog.youkuaiyun.com/aaaa_aaab/article/details/141569232

这个错误是由于浏览器的同源策略（CORS, Cross-Origin Resource Sharing）导致的。当从一个源（origin）向另一个源请求资源时，如果这两个源的协议、域名或端口号不同，就会触发CORS策略。

解决方法

要解决这个问题，你需要在你的后端服务中添加CORS支持，以便它允许来自你的请求。这通常涉及到在你的后端服务器中添加适当的响应头（Headers）。

以下是一些常见后端技术栈中如何设置CORS的示例：

Node.js（使用Express）

如果你正在使用Express框架，你可以安装并使用cors中间件来简化CORS的配置。

首先，安装cors包：

npm install cors

然后，在你的Express应用中引入并使用它：

const express = require('express');  
const cors = require('cors');  
const app = express();  
  
app.use(cors({  
  origin: 'http://localhost:5173' // 只允许来自这个源的请求  
}));  
  
// 其他中间件和路由...  
  
app.listen(3000, () => {  
  console.log('Server is running on port 3000');  
});