Chrome缓存CORS状态：已配置CORS仍拒绝请求未访问后端

问题回顾 #

我有一个React应用https://frontend-dev-domain.com，调用Python（Flask）后端https://backend-dev-domain.com。最初未在后端设置CORS头，前端请求返回401；之后设置Access-Control-Allow-Origin: *，但前端仍无法调用后端——Chrome开发者工具显示请求发出，但后端无日志（未收到请求）。已勾选「Disable cache」，直接访问后端URL能确认CORS头存在，控制台却仍报错：

Access to fetch at 'https://5000-cawoodm-pyreact-oft7hvkp559.ws-eu105.gitpod.io/api/shopping-list' from origin 'https://5173-cawoodm-pyreact-oft7hvkp559.ws-eu105.gitpod.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

尝试设置明确源、添加Vary: Origin头均无效。

解决方案步骤 #

1. 彻底清除Chrome缓存（不止勾选Disable Cache） #

勾选开发者工具的「Disable cache」有时无法清除CORS预检请求的缓存，需手动清理：

• 打开Chrome设置 → 隐私和安全 → 清除浏览数据
• 时间范围选「所有时间」，仅勾选「缓存的图片和文件」，点击「清除数据」
• 重启Chrome后再测试请求

2. 用Flask-CORS库处理CORS（避免手动配置遗漏） #

手动设置CORS头容易忽略预检请求（OPTIONS）处理，用官方维护的库更可靠：

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
# 开发环境可直接允许所有源
# CORS(app)
# 生产环境指定明确源
CORS(app, origins=["https://5173-cawoodm-pyreact-oft7hvkp559.ws-eu105.gitpod.io"])

# 路由逻辑示例
@app.route('/api/shopping-list')
def get_shopping_list():
    return {"items": ["apple", "banana"]}

如果必须手动处理，需确保OPTIONS请求返回完整CORS头：

from flask import make_response, request

@app.route('/api/shopping-list', methods=['GET', 'OPTIONS'])
def shopping_list():
    if request.method == 'OPTIONS':
        resp = make_response()
        resp.headers['Access-Control-Allow-Origin'] = 'https://5173-cawoodm-pyreact-oft7hvkp559.ws-eu105.gitpod.io'
        resp.headers['Access-Control-Allow-Headers'] = 'Content-Type'
        resp.headers['Access-Control-Allow-Methods'] = 'GET'
        return resp
    # GET请求逻辑
    return {"items": ["apple", "banana"]}

3. 强制浏览器发送新请求（绕过缓存） #

在请求URL后添加随机参数，让浏览器认为是新请求：

// React请求示例
fetch(`https://5000-cawoodm-pyreact-oft7hvkp559.ws-eu105.gitpod.io/api/shopping-list?rand=${Math.random()}`)
  .then(res => res.json())
  .then(data => console.log(data))

4. 排查浏览器扩展干扰 #

广告拦截、隐私保护类扩展可能拦截CORS请求，临时禁用所有扩展后再测试。

5. 用curl验证后端CORS配置 #

命令行直接测试后端返回的头，确认配置生效：

curl -H "Origin: https://5173-cawoodm-pyreact-oft7hvkp559.ws-eu105.gitpod.io" -I https://5000-cawoodm-pyreact-oft7hvkp559.ws-eu105.gitpod.io/api/shopping-list

若返回头包含Access-Control-Allow-Origin，则问题在浏览器侧；若没有，重启Flask服务并检查配置是否生效。

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