如何修复 JavaScript 中的 “Blocked by CORS Policy” 错误（分步指南）

Source: Dev.to

Introduction

如果你正在构建一个 Web 应用，并在浏览器控制台看到以下错误：

Access to fetch at 'https://api.example.com' from origin 'http://localhost:3000' 
has been blocked by CORS policy.

这是初学者在使用 JavaScript 和 API 时最常遇到的问题之一。

在本文中，你将学习：

• 什么是 CORS
• 为什么会出现此错误
• 如何在 Node.js（Express）中修复它
• 如何在 PHP 中修复它
• 生产环境的最佳实践

What Is CORS?

CORS（跨域资源共享）是浏览器的安全特性。当满足以下条件时，请求被视为跨域：

• 前端运行在 http://localhost:3000
• 后端运行在 https://api.example.com

由于这些来源不同，浏览器会阻止请求，除非服务器明确允许。

重要提示： CORS 由浏览器强制执行，而不是由服务器强制执行。

Why the CORS Error Happens

CORS 错误产生的原因是后端服务器没有发送正确的 HTTP 头。浏览器会检查类似以下的头部：

Access-Control-Allow-Origin

如果缺少该头，浏览器会阻止请求。这意味着仅靠前端无法解决 CORS，必须在后端进行配置。

Solution 1: Fix CORS in Node.js (Express)

1. 安装 CORS 中间件：

npm install cors

2. 更新你的 Express 服务器：

const express = require('express');
const cors = require('cors');

const app = express();

app.use(cors());

app.get('/api/data', (req, res) => {
  res.json({ message: "CORS is fixed!" });
});

app.listen(5000, () => console.log("Server running on port 5000"));

3. 重启服务器并再次测试请求。

Solution 2: Fix CORS in PHP

在你的 PHP 文件顶部添加以下头部：

这将允许跨域请求。

Important: Do Not Use “*” in Production

使用：

header("Access-Control-Allow-Origin: *");

会允许任何域的请求，这在生产环境中是不安全的。请改为指定允许的域名：

header("Access-Control-Allow-Origin: https://yourdomain.com");

Why Postman Works but the Browser Fails

• Postman works because it does not enforce CORS restrictions.
• Browsers fail because they enforce CORS as a security rule.

Quick Debug Checklist

• 确认后端已设置 CORS 头部。
• 在修改后重启服务器。
• 清除浏览器缓存。
• 检查浏览器控制台的最新信息。

Conclusion

“Blocked by CORS Policy” 错误不是 JavaScript 的 bug，而是浏览器的安全规则。只要理解 CORS 必须在后端配置，解决方案就会变得非常直接。