带数据的Axios POST请求出现Access-Control-Allow-Origin跨域错误

在ASP Classic服务端、React（TypeScript）客户端环境下，使用Axios发起带数据的POST AJAX请求时出现Access-Control-Allow-Origin错误，但不带数据的POST请求可正常运行。

服务端代码（login.asp） #

<% Response.AddHeader "Access-Control-Allow-Origin", "*" %>
<% Response.AddHeader "Access-Control-Allow-Methods", "GET, POST, OPTIONS" %>
<% Response.AddHeader "Access-Control-Allow-Headers", "Content-Type, Authorization" %>

<%
    Response.Write("hed")
%>

客户端代码（Login.tsx） #

import React, { useState } from 'react';
import axios from 'axios';
import {loginResult} from './models/loginResult.ts'
const Login: React.FC = () => {
  const [username, setUsername] = useState('');

  const handleLogin = async () => {
    try {
        const dataToSend = {
            username: username,
        };
        const response = await axios.post('http://localhost:12403/login.asp',dataToSend);
        console.log(response.data);
    } catch (error) {
        console.log(error);
    } finally {

    }
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
    
      <button onClick={handleLogin}>Login</button>
    </div>
  );
};

export default Login;

客户端入口文件（index.tsx） #

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import Login from './Login.tsx';
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <Login />
  </React.StrictMode>
);

原因分析 #

带数据的POST请求会触发浏览器的预检OPTIONS请求，用于确认服务端是否允许跨域请求。当前服务端代码未处理OPTIONS请求，导致浏览器无法验证跨域合法性，从而抛出错误。而不带数据的POST属于「简单请求」，不会触发预检流程，因此能正常响应。

解决方案 #

修改ASP Classic服务端代码，添加OPTIONS请求的处理逻辑：

<%
' 处理OPTIONS预检请求
If Request.ServerVariables("REQUEST_METHOD") = "OPTIONS" Then
    Response.AddHeader "Access-Control-Allow-Origin", "*"
    Response.AddHeader "Access-Control-Allow-Methods", "GET, POST, OPTIONS"
    Response.AddHeader "Access-Control-Allow-Headers", "Content-Type, Authorization"
    Response.Status = 200
    Response.End()
End If

' 处理正常请求
Response.AddHeader "Access-Control-Allow-Origin", "*"
Response.AddHeader "Access-Control-Allow-Methods", "GET, POST, OPTIONS"
Response.AddHeader "Access-Control-Allow-Headers", "Content-Type, Authorization"

Response.Write("hed")
%>

说明 #

当浏览器发送OPTIONS预检请求时，服务端需返回200状态码及完整的CORS响应头，并通过Response.End()终止后续代码执行。浏览器验证通过后，会自动发送实际的POST请求，此时服务端再处理业务逻辑即可。

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