JavaScript登录功能发送OPTIONS请求而非POST请求，报HTTP403错误

看起来你碰到了典型的CORS预检请求问题——浏览器在发送跨域的非简单POST请求前，会自动发送一个OPTIONS请求做“预检”，如果你的服务器没有正确处理这个OPTIONS请求，就会返回403禁止访问，导致真正的POST请求根本发不出去。咱们一步步来解决：

先搞懂为什么会发OPTIONS请求 #

你的登录请求满足两个触发预检的条件：

• 跨域（前端页面域名/端口和后端服务器不一致，比如前端是http://localhost:8080，后端是http://localhost:3000）
• 请求带了自定义头Authorization，同时Content-Type是application/json（这两个都属于非简单请求的范畴）

浏览器为了安全，会先发送OPTIONS请求询问服务器：“我能不能发一个带Authorization头、Content-Type为json的POST请求？”，如果服务器没明确允许，就会返回403，终止后续请求。

核心解决方法：后端配置允许CORS预检 #

问题的根源在后端，你需要让服务器正确响应OPTIONS请求，并返回允许跨域的HTTP头。以下是几种常见后端的配置示例：

1. Node.js/Express 环境 #

推荐用cors中间件快速配置，或者手动处理OPTIONS路由：

// 方法1：使用cors中间件
const cors = require('cors');
const express = require('express');
const app = express();

// 配置允许你的前端域名访问，同时允许需要的请求头和方法
app.use(cors({
  origin: 'http://localhost:你的前端端口', // 比如前端跑在8080就填这个
  methods: ['POST', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization']
}));

// 方法2：手动处理OPTIONS请求（如果不想用中间件）
app.options('/user/login', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:你的前端端口');
  res.setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.sendStatus(200); // 必须返回200表示允许预检
});

2. Java Spring Boot 环境 #

可以通过配置类或者注解来开启CORS：

// 配置类示例
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/user/login")
                .allowedOrigins("http://localhost:你的前端端口")
                .allowedMethods("POST", "OPTIONS")
                .allowedHeaders("Content-Type", "Authorization")
                .allowCredentials(true);
    }
}

3. Python Flask 环境 #

可以用flask-cors扩展：

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app, resources={"/user/login": {
    "origins": "http://localhost:你的前端端口",
    "methods": ["POST", "OPTIONS"],
    "allow_headers": ["Content-Type", "Authorization"]
}})

前端代码的小检查（可选） #

• 确认getURL()返回的后端地址确实和前端页面跨域，如果是同域（比如前端和后端都在localhost:8080），那不会触发预检，可能是其他配置问题
• 你的代码里把auth存在localStorage的逻辑没问题，但要注意：预检请求不会携带Authorization头，浏览器只会在预检通过后，才会在真正的POST请求里带上这个头

只要后端正确处理了OPTIONS请求并返回对应的CORS头，浏览器就会继续发送真正的POST登录请求，403的问题就能解决了。

内容的提问来源于stack exchange，提问作者NeagDB