使用 React 通过 POST 发送 JSON 数据而不触发选项请求

在 React 中发送 JSON 数据时如何绕过 OPTIONS 请求

解决方案 1：使用 Python FastAPI 调整后端以处理 CORS 预检并保持 JSON 兼容性

# Import required libraries
from fastapi import FastAPI, Request
from fastapi.middleware.cors import CORSMiddleware
# Initialize FastAPI app
app = FastAPI()
# Configure CORS to accept requests from frontend
origins = ["http://localhost:3000"]
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"]
)
# Endpoint for receiving JSON data
@app.post("/auth")
async def authenticate_user(request: Request):
    data = await request.json()
    return {"message": "User authenticated", "data": data}

以 JSON 形式发送数据时最小化 OPTIONS 请求

解决方案 2：在 React 中使用带有简单标头的 fetch 并尽可能避免预检

// Use fetch with minimal headers
const sendData = async () => {
    const url = "http://localhost:8000/auth";
    const data = { email: "user@example.com", password: "securepassword" };
    // Avoid complex headers
    const response = await fetch(url, {
        method: "POST",
        headers: {
            "Accept": "application/json",
        },
        body: JSON.stringify(data),
    });
    const result = await response.json();
    console.log(result);
};

通过单元测试增强解决方案

解决方案 3：使用 FastAPI TestClient 对后端端点进行单元测试

# Import FastAPI TestClient
from fastapi.testclient import TestClient
from main import app
# Initialize test client
client = TestClient(app)
# Test POST request
def test_authenticate_user():
    response = client.post("/auth", json={"email": "test@example.com", "password": "password"})
    assert response.status_code == 200
    assert response.json()["message"] == "User authenticated"

处理 JSON POST 请求的微调前端方法

解决方案4：动态调整标头以符合后端要求

// Dynamically set headers to prevent preflight
const sendAuthData = async () => {
    const url = "http://localhost:8000/auth";
    const data = { email: "user2@example.com", password: "mypassword" };
    // Adjust headers and request body
    const response = await fetch(url, {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify(data),
    });
    const result = await response.json();
    console.log(result);
};

关于 React POST 请求和 CORS 的常见问题

1. React 中什么会触发 OPTIONS 请求？
2. 当像这样的标头时，浏览器会触发 OPTIONS 请求作为预检检查 'Content-Type': 'application/json' 或类似的方法 PUT 或者 DELETE 被使用。
3. 如何在不影响功能的情况下避免 OPTIONS 请求？
4. 使用默认的浏览器设置标头或简化标头以避免触发 CORS 预检。确保后端支持这些配置。
5. 为什么 FastAPI 拒绝使用 URL 编码标头发送的数据？
6. FastAPI 默认情况下需要 JSON 有效负载，因此它无法解析发送的数据 'application/x-www-form-urlencoded' 无需额外的解析器。
7. 完全绕过预检请求是否安全？
8. 如果在后端强制执行适当的输入验证和清理，则绕过预检请求是安全的。切勿相信未经验证而收到的数据。
9. 允许 CORS 如何帮助解决 OPTIONS 错误？
10. 配置 CORSMiddleware FastAPI 中允许特定的来源、方法和标头，使服务器能够毫无问题地接受请求。

简化数据传输的关键要点

在 React 中优化 POST 请求涉及配置标头和使用接受动态数据格式的后端。通过减少不必要的 OPTIONS 请求，我们提高了速度和用户体验，同时通过适当的验证确保安全性。

通过FastAPI和fetch中的实际配置，实现无缝通信。这些方法为 Web 应用程序中安全、高效的数据传输奠定了基础，使开发人员和最终用户都受益。 🔐