跨域请求难题大破解：全面解析 CORS 设置与常见解决方案

2024-03-17 08:51:37

RESTful API 的跨域请求问题与解决方案

简介

当您尝试从不同的域获取数据时，可能会遇到 "No 'Access-Control-Allow-Origin' header is present on the requested resource" 错误。这是因为跨域请求默认情况下是被禁止的。本文将引导您了解跨域资源共享 (CORS) 的概念，并逐步介绍如何解决跨域请求问题。

跨域请求与 CORS

跨域请求是指从一个源向另一个源发送请求，这两个源位于不同的域（例如 localhost 和远程 API）。出于安全原因，浏览器会阻止此类请求，除非服务器明确允许。

CORS 是一组 HTTP 响应头，用于指示浏览器允许特定域跨域访问资源。通过设置 CORS 头，服务器可以向客户端表明允许其访问 API，从而解决跨域请求问题。

服务器端设置 CORS 头

解决跨域请求的关键步骤是在服务器端设置 CORS 头。这些头告知浏览器 API 可供哪些域访问，以及允许哪些请求方法。

以下示例展示了如何使用 Node.js 设置 CORS 头：

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.header('Access-Control-Allow-Credentials', 'true');
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  next();
});

客户端代码中设置 CORS 头

在 JavaScript 代码中，可以使用 fetch() API 设置 CORS 头。以下示例展示了如何使用 fetch() 进行跨域请求：

const headers = new Headers();

headers.append('Content-Type', 'application/json');
headers.append('Accept', 'application/json');

// 添加 CORS 头
headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');
headers.append('Access-Control-Allow-Credentials', 'true');
headers.append('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');

fetch(sign_in, {
  mode: 'cors',
  credentials: 'include',
  method: 'POST',
  headers: headers
})
.then(response => response.json())
.then(json => console.log(json))
.catch(error => console.log('Authorization failed : ' + error.message));