Vue Axios跨域无法存储/发送Flask后端Session Cookie问题

我之前也碰到过几乎一模一样的跨域Cookie问题，结合你的代码细节来看，问题确实出在CORS配置细节、Axios请求写法和Flask Session Cookie属性这几个点上，咱们一步步来解决：

一、先修正前端Axios的两个关键问题 #

1. 修复登录请求中Headers的错误写法 #

你的auth.js里的POST请求把headers放到了请求数据对象里，这是错误的！Axios的POST参数结构是post(url, data, config)，headers属于第三个参数的config对象，不是data的一部分。修正后代码如下：

this._vm.$http.post(
  backendUrl+'/api/login',
  { email: formEmail, password: formPassword }, // 这部分是请求数据
  { headers: {'Content-Type': 'application/json'} } // 这部分才是配置项，包含headers
)
.then(function (response) {
  // ... 你的后续逻辑
})

虽然你说登录响应已经返回Cookie，但这个错误可能导致后端解析请求时出现潜在问题，必须修正。

2. 确认Axios全局withCredentials配置生效 #

你的main.js配置写法是对的，但可以改成更清晰的实例创建方式，避免后续配置被覆盖：

import axios from 'axios'

// 创建独立的Axios实例，统一配置
const axiosInstance = axios.create({
  withCredentials: true, // 关键：允许携带跨域凭据
  baseURL: backendUrl // 可以把后端地址统一放这里，减少重复代码
})

Vue.prototype.$http = axiosInstance

确保所有请求都使用这个全局实例，不要单独创建新的Axios实例（除非也配置了withCredentials）。

二、调整Flask后端的CORS和Session配置 #

1. 统一CORS配置，避免全局+局部冲突 #

你现在同时用了全局CORS(app, ...)和局部@cross_origin，容易出现配置冲突。建议保留全局配置即可，去掉每个路由上的@cross_origin装饰器：

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
# 全局CORS配置，明确允许的源和凭据
CORS(app, origins='http://127.0.0.1:8082', supports_credentials=True)
app.config['CORS_HEADERS'] = 'Content-Type'

如果必须用局部装饰器，一定要确保每个@cross_origin都加上supports_credentials=True，否则会覆盖全局配置。

2. 关键：设置Session Cookie的SameSite属性 #

浏览器默认的SameSite=Lax规则会阻止跨域请求携带Cookie，这是你后续请求返回401的核心原因！需要根据环境调整Flask的Session配置：

# 根据开发/生产环境设置Cookie属性
if app.debug:
    # 本地HTTP开发环境，SameSite设为Lax，Secure关闭（因为HTTP不支持Secure）
    app.config['SESSION_COOKIE_SAMESITE'] = 'Lax'
    app.config['SESSION_COOKIE_SECURE'] = False
else:
    # 生产环境HTTPS，必须设为SameSite=None + Secure
    app.config['SESSION_COOKIE_SAMESITE'] = 'None'
    app.config['SESSION_COOKIE_SECURE'] = True

注意：如果本地开发用Chrome浏览器，即使设置了SameSite=Lax，偶尔还是会有跨域Cookie拦截问题，可以用Chrome的启动参数绕过：chrome.exe --disable-features=SameSiteByDefaultCookies,CookiesWithoutSameSiteMustBeSecure

三、验证步骤 #

1. 登录后打开浏览器开发者工具（F12），切换到Application标签，查看Cookies下的http://127.0.0.1:5000，确认Session Cookie已被存储，且SameSite属性符合你的配置。
2. 发起Profile页面的请求，查看Network标签中该请求的Request Headers，确认是否包含Cookie字段。如果有，说明配置生效，后端就能正常识别Session了。

按上面的步骤调整后，应该就能解决跨域下Cookie无法携带的问题了！

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