前端报错`Cross-Origin Request Blocked`的CORS配置指南

前端报错Cross-Origin Request Blocked的CORS配置指南

在前端开发中，Cross-Origin Request Blocked错误是一个常见的问题，通常发生在浏览器出于安全考虑阻止跨域请求时。这个错误是由浏览器的同源策略（Same-Origin Policy）导致的，它要求请求的URL与当前网页的URL具有相同的协议、域名和端口。本文将结合CSDN技术社区的实战案例，总结解决该错误的实用技巧，并提供代码和表格示例分析。

一、CORS基础概念

CORS（跨域资源共享，Cross-Origin Resource Sharing）是一种基于HTTP头的机制，它允许服务器声明哪些源可以通过浏览器访问其资源。通过设置CORS头，服务器可以指定允许哪些域名访问其资源，以及允许哪些HTTP方法和请求头。

二、常见CORS错误及解决方案

1. 缺少CORS头

错误表现：浏览器控制台显示Cross-Origin Request Blocked，因为服务器没有设置正确的CORS响应头。

解决方案：

• 在服务器端设置CORS头：确保服务器响应中包含Access-Control-Allow-Origin头，并设置为允许的来源地址。

示例代码

Node.js Express 示例：

const express = require('express');
const cors = require('cors');
const app = express();
// 允许所有来源的请求（生产环境不推荐）
// app.use(cors());
// 允许特定来源的请求
app.use(cors({
   
  origin: 'http://localhost:3000', // 允许的前端地址
  methods: ['GET', 'POST', 'PUT', 'DELETE'], // 允许的方法
  allowedHeaders: ['Content-Type'], // 允许的请求头
  credentials: true // 是否允许发送Cookie
}));
app.get('/api/data', (req, res) => {
   
  res.json({