前端No 'Access-Control-Allow-Origin' header is present on the requested resource

### 解决前端 No 'Access-Control-Allow-Origin' Header CORS 错误

#### 服务器端配置CORS头
当遇到 `No 'Access-Control-Allow-Origin' header` 报错时，通常是因为服务器未设置允许跨域资源共享 (CORS) 的响应头部。通过修改服务器的 CORS 设置来解决问题是一个有效的方法[^2]。

对于基于Node.js的应用程序来说，可以通过安装并使用cors中间件轻松实现这一功能：

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

let app = express();
app.use(cors());

如果是在其他类型的Web服务上，则需查阅对应平台关于如何添加HTTP响应头的信息，比如Apache可通过`.htaccess`文件加入如下指令完成相同目的:

Header set Access-Control-Allow-Origin "*"

#### 处理预检请求(Preflight Request)
有时即使设置了简单的CORS头仍然会收到错误提示，这可能涉及到更复杂的场景——即所谓的“预检请求”。浏览器会在实际请求之前发出OPTIONS方法的探测性请求以确认真正的请求是否安全可行。此时除了基本的`Access-Control-Allow-Origin`之外还需要额外指定一些参数如`Access-Control-Allow-Methods`, `Access-Control-Allow-Headers`等[^3]。

例如，在Express框架中可这样处理：

app.options('*', cors()); // Enable Preflight Requests for all routes

或是更加具体地定义哪些资源应该被共享以及怎样共享它们：

var corsOptions = {
  origin: function (origin, callback) {
    if (whitelist.indexOf(origin) !== -1 || !origin) {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  },
  methods: ['GET', 'POST'],
  allowedHeaders: ['Content-Type', 'Authorization']
}

app.use(cors(corsOptions));

以上措施能够帮助解决大部分由CORS引起的问题，但如果问题依旧存在则可能是由于某些特殊情况造成的，这时就需要进一步排查具体的网络环境和应用逻辑了。