response for preflight is invalid (redirect)

基础概念

Preflight Request 是浏览器在执行复杂跨域请求之前发送的一个 OPTIONS 请求，用于检查实际请求是否安全。服务器通过这个预检请求来判断是否允许该跨域请求。

问题原因

当服务器对预检请求（OPTIONS 请求）返回了一个重定向响应（如 301、302 等），浏览器会认为这个重定向是不安全的，因此会拒绝继续执行实际的请求。

解决方法

1. 避免重定向： 确保服务器不对 OPTIONS 请求进行重定向。可以在服务器配置中特别处理 OPTIONS 请求，使其直接返回允许跨域的相关头部信息，而不是重定向。
2. 正确设置 CORS 头部： 在服务器端设置正确的 CORS（跨源资源共享）头部信息，例如：
3. 正确设置 CORS 头部： 在服务器端设置正确的 CORS（跨源资源共享）头部信息，例如：

示例代码（Node.js + Express）

以下是一个简单的 Express 应用示例，展示了如何正确处理 CORS 和避免对 OPTIONS 请求进行重定向：

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

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  
  if (req.method === 'OPTIONS') {
    // 直接返回成功响应，不进行任何重定向
    res.sendStatus(200);
  } else {
    next();
  }
});

app.get('/data', (req, res) => {
  res.json({ message: 'This is data from the server.' });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

应用场景

这种情况常见于需要处理跨域请求的 Web 应用中，特别是在前后端分离的开发模式下。例如，一个前端应用运行在 http://example.com，而 API 服务运行在不同的域 http://api.example.com。

优势

正确处理预检请求可以确保应用的安全性和兼容性，避免因跨域问题导致的请求失败。

类型

• 简单请求：满足特定条件的请求（如 GET、POST 请求，且头部信息有限）不需要预检。
• 复杂请求：其他情况都需要发送预检请求。

通过以上方法，可以有效解决 response for preflight is invalid (redirect) 的问题，确保跨域请求的正常进行。