VueJS中axios/fetch带Payload的POST请求OPTIONS预请求未携Cookie

问题的核心在于带Payload的POST请求会触发浏览器的OPTIONS预检请求，而预检请求是否携带Cookie，不仅取决于前端配置，更关键是后端的CORS（跨域资源共享）配置是否正确放行凭证。以下是具体的解决步骤：

一、确认前端配置（确保全局生效） #

1. Axios 配置 #

必须全局开启withCredentials，而不是仅在单个请求中设置，确保所有请求（包括自动触发的OPTIONS）都携带凭证：

// 在Vue的main.js或api封装文件中
import axios from 'axios';

// 全局默认配置
axios.defaults.withCredentials = true;
axios.defaults.baseURL = 'https://你的API域名';

// 或者创建带配置的axios实例
const apiClient = axios.create({
  baseURL: 'https://你的API域名',
  withCredentials: true
});

2. Fetch 配置 #

Fetch不会默认继承凭证配置，所以每次POST请求都必须显式指定credentials: "include"：

fetch('https://你的API域名/目标接口', {
  method: 'POST',
  credentials: 'include',
  headers: {
    'Content-Type': 'application/json' // 带Payload通常需要这个头
  },
  body: JSON.stringify({ /* 你的请求Payload */ })
});

二、后端CORS配置（关键！必须正确设置） #

浏览器只有在后端明确允许的情况下，才会在OPTIONS预检请求中携带Cookie，后端需要完成以下配置：

核心配置项 #

• Access-Control-Allow-Credentials: true：必须设置，告知浏览器允许携带凭证（Cookie）。
• Access-Control-Allow-Origin：不能设为*，必须指定前端的具体域名（如http://localhost:8080），否则浏览器会拒绝携带Cookie。
• Access-Control-Allow-Methods：必须包含OPTIONS和POST（以及你需要的其他方法）。
• Access-Control-Allow-Headers：需要包含请求中用到的头字段，比如Content-Type（带JSON Payload时必须）、自定义的授权头等。
• 放行OPTIONS请求：服务器对OPTIONS请求不能做Cookie验证，直接返回200/204状态码即可。

不同后端的示例配置 #

Node.js Express

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

// 用cors中间件配置
app.use(cors({
  origin: 'http://localhost:8080', // 前端域名
  credentials: true,
  allowedHeaders: ['Content-Type', 'Authorization'],
  methods: ['GET', 'POST', 'OPTIONS']
}));

// 或者手动处理OPTIONS请求
app.options('*', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080');
  res.setHeader('Access-Control-Allow-Credentials', 'true');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.sendStatus(204); // 无内容响应
});

Java Spring Boot

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
import java.util.List;

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        // 指定允许的前端域名
        config.setAllowedOrigins(List.of("http://localhost:8080"));
        config.setAllowCredentials(true);
        config.setAllowedMethods(List.of("GET", "POST", "OPTIONS"));
        config.setAllowedHeaders(List.of("Content-Type", "Authorization"));

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

三、问题根源解释 #

当POST请求带Payload（且Content-Type为application/json等非简单类型）时，浏览器会先发送OPTIONS预检请求，确认服务器是否允许该跨域请求。此时：

• 如果后端未返回Access-Control-Allow-Credentials: true，或Access-Control-Allow-Origin为*，浏览器会自动跳过在OPTIONS请求中携带Cookie，导致服务器验证失败。
• 只有后端正确配置上述头，浏览器才会在OPTIONS和后续的POST请求中都携带Cookie。

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