如何在Axios GET请求中同时传数据与请求头？遇CORS错误求助

我来帮你一步步搞定这个问题，你遇到的CORS错误主要是因为后端没有正确配置允许自定义请求头，另外前端的请求头写法也有小问题，我们逐个解决：

1. 先修复前端Axios的请求头写法 #

你原来的Authorization头写法有问题，模板字符串的使用不正确，会导致${token}被当作字面量字符串，而不是替换成实际的token值。修改成下面这样：

let res = await axios({ 
  method: 'get', 
  url: url1, 
  params: params, 
  headers: { 
    'Authorization': `Bearer ${token}` 
  } 
});

这里用反引号（）包裹整个Authorization值，才能正确解析${token}`变量。

2. 调整后端Flask的CORS配置 #

虽然你已经启用了Flask-CORS，但默认配置不会允许Authorization这类自定义请求头，浏览器发送的OPTIONS预检请求会被拒绝，从而触发CORS错误。修改你的CORS初始化代码，明确指定允许的请求头：

# 替换原来的CORS(app, support_credentials=True)
CORS(app, support_credentials=True, allowed_headers=["Authorization", "Content-Type"])

如果是开发环境想更宽松一点（生产环境不建议这么做），可以直接设置允许所有头：

CORS(app, support_credentials=True, allowed_headers="*")

另外你代码里重复设置了app.config['CORS_HEADERS']，这个可以保留，但核心是CORS实例化时的allowed_headers配置。

3. 额外检查点 #

• 确保你的Flask应用没有自定义的before_request钩子拦截OPTIONS请求，Flask-CORS通常会自动处理预检请求，但如果有自定义拦截逻辑，需要手动放行OPTIONS方法：

  @app.before_request
  def handle_options():
      if request.method == 'OPTIONS':
          return '', 200
  

• 确认你的token是有效的字符串，虽然这不会导致CORS错误，但如果token格式不对，后续认证也会失败。

这样调整后，前端的GET请求带Authorization头应该就能正常通过CORS校验了。

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