一旦我添加JWT授权头，CORS就无法工作

Question

我有一个烧瓶后端和一个反应前端。Flask后端是一个将与其他微服务通信的API。在开发中，我的React前端在localhost:3000上运行，Flask应用程序在localhost:5000上运行。显然，这些端口是不同的，默认情况下会抛出CORS错误。所以我添加了Flask_CORS并允许来自localhost:3000的流量。这很有效，我现在可以为GET和POST请求提供服务。

然后，我将Firebase身份验证添加到前端。我收到一个JWT，然后我想发送JWT和ech API请求，以确保允许用户发出某些请求，这些请求将在Flask后端进行验证。

我在后端的Axios请求中将token_id添加到头中，但现在我收到以下错误：

localhost/：1访问位于'http://localhost:5000/items“起源”http://localhost:3000'已被CORS策略阻止：对飞行前请求的响应未通过访问控制检查：请求的资源上不存在'access control Allow Origin'标头。

当我检查网络选项卡时，我注意到如果没有JWT，请求会很好地通过。标题内容见下文：

>

一般：

• 请求URL:http://localhost:5000/items
• 请求方法：获取
• 状态代码：200正常
• 远程地址：127.0。0.1:5000
• 推荐人策略：降级时无推荐人

响应报头：

• 访问-控制-允许-起源：http://localhost:3000

请求报头：

• 显示临时标题
• 接受：application/json，text/plain，/
• 来源：http://localhost:3000
• 推荐人：http://localhost:3000/
• Sec获取模式：cors
• 用户代理：Mozilla/5.0（Windows NT 10.0；Win64；x64）AppleWebKit/537.36（KHTML，类似Gecko）Chrome/76.0。3809.132狩猎/537.36

然后，我只将JWT添加到Axios拦截器的授权标头配置中，现在请求失败，网络选项卡中出现以下标头：

• 一般：
  • 请求URL：http://localhost:5000/items
  • 请求方法：OPTIONS
  • 状态码：200 OK
  • 远程地址：127.0.0.1:5000
  • 推荐人政策：无推荐人降级时
  • 允许：发布、选项、标题、获取
  • 内容长度：0
  • 内容类型：text/html；字符集=utf-8
  • 日期：2019年9月6日星期五09:14:46 GMT
  • 服务器：Werkzeug/0.15。5 Python/3.7。四,
  • 显示临时标题
  • 访问-控制-请求-报头：授权
  • 访问-控制-请求-方法：GET
  • 产地：http://localhost:3000
  • 裁判：http://localhost:3000/
  • Sec-Fetch-Mode： no-cors
  用户代理：Mozilla/5.0（Windows NT 10.0； Win64； x64）AppleWebKit/537.36（KHTML，像壁虎）Chrome/76.0.3809.132Safari /537.36

  我注意到，当添加授权头时，访问控制允许起源会消失，取而代之的是访问Control_Request头。

  前端的相关代码如下所示

  import axios from 'axios';
  import * as firebase from "firebase/app";
  import 'firebase/auth';
  
  const instance = axios.create({
      baseURL: 'http://localhost:5000/',
  });
  
  instance.interceptors.request.use(config => {
      const id_token = firebase.auth().currentUser.getIdToken();
      config.headers = { Authorization: id_token}; <---Commenting out this line works
      return config
  }, error => {
      return Promise.reject(error);
  })
  export default instance;
  

  我不知道如何或为什么一旦添加JWT，CORS就无法工作。我怀疑这是因为一旦JWT被添加，就会有一个飞行前请求。但是我在服务器端没有做任何更改，所以我很困惑，为什么仅仅因为添加了JWT，服务器就不会提供SuiteableLCORS响应。

  任何指点都将不胜感激。

Answer 1

您可以在主文件的顶部定义CORS，它将允许所有的CORS请求

from flask import Flask
from flask_cors import CORS, cross_origin

app = Flask(__name__)
CORS(app)

@app.route("/api/test")
def test_cors():
  return "CORS allowed"