克服CORS，用Node.js实现无缝跨域通讯

2024-01-29 02:24:59

跨域资源共享：在不同源之间建立联系

在当今相互关联的网络世界中，跨域资源共享（CORS）已成为网站和应用程序之间无缝交互不可或缺的一部分。让我们深入了解什么是 CORS，以及如何在 Node.js 和浏览器端实现它，并探索一些常见的疑难问题。

什么是跨域资源共享？

跨域资源共享 (CORS) 是一种机制，它允许来自不同源（即不同域、协议或端口）的 Web 应用程序访问彼此的资源。如果没有 CORS，出于安全考虑，浏览器会阻止跨域请求，以防止恶意网站获取用户敏感信息或执行未经授权的操作。

如何使用 CORS

在服务器端，需要使用附加的 HTTP 头来配置 CORS。以下是如何在 Node.js 中使用流行的 express-cors 中间件实现 CORS：

// 引入 express-cors 中间件
const cors = require('express-cors');

// 创建 Express 应用程序
const app = express();

// 使用 express-cors 中间件
app.use(cors());

// 定义路由
app.get('/api/data', (req, res) => {
  // 返回数据
  res.json({ data: 'Hello, world!' });
});

// 启动服务器
app.listen(3000, () => {
  console.log('服务器正在监听端口 3000');
});

在浏览器端，可以使用 XMLHttpRequest 或 fetch API 发送跨域请求：

// 使用 XMLHttpRequest 发送跨域请求
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/data');
xhr.send();

xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  } else {
    console.error(xhr.statusText);
  }
};

// 使用 fetch API 发送跨域请求
fetch('https://example.com/api/data')
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('错误：' + response.statusText);
    }
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });