添加 JWT 授权后，CORS 无法工作 header

Question

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

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

我在 back-end 的 Axios 请求中将 token_id 添加到 header 中，但现在出现以下错误：

localhost/:1 Access to XMLHttpRequest at 'http://localhost:5000/items' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

当我检查网络选项卡时，我注意到在没有 JWT 的情况下，请求可以正常通过。 header 内容见下文：

一般：
- 请求URL：http://localhost:5000/items
- 请求方法：GET
- 状态码：200 正常
- 远程地址：127.0.0.1:5000
- 推荐人政策：no-referrer-when-downgrade
回复Headers:
- Access-Control-Allow-Origin: http://localhost:3000 <--这一行是我关心的
- Content-Length: 37
- Content-Type: application/json
- 日期：2019 年 9 月 6 日，星期五 09:10:10 GMT
- 服务器：Werkzeug/0.15.5 Python/3.7.4
- 变化：来源
请求Headers:
- 已显示临时 header
- 接受：application/json、text/plain、/
- 来源：http://localhost:3000
- 推荐人：http://localhost:3000/
- Sec-Fetch-Mode: cors
- User-Agent：Mozilla/5.0（Windows NT 10.0；Win64；x64）AppleWebKit/537.36（KHTML，如 Gecko）Chrome/76。 0.3809.132Safari/537.36

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

一般：
- 请求URL：http://localhost:5000/items
- 请求方法：OPTIONS
- 状态码：200 正常
- 远程地址：127.0.0.1:5000
- 推荐人政策：no-referrer-when-downgrade
响应Headers：
- 允许：POST、OPTIONS、HEAD、GET
- Content-Length: 0
- Content-Type: text/html;字符集=utf-8
- 日期：2019 年 9 月 6 日，星期五 09:14:46 GMT
- 服务器：Werkzeug/0.15.5 Python/3.7.4
要求Headers：
- 已显示临时 header
- Access-Control-Request-Headers:授权
- Access-Control-Request-Method: 得到
- 来源：http://localhost:3000
- 推荐人：http://localhost:3000/
- Sec-Fetch-Mode: no-cors
- User-Agent：Mozilla/5.0（Windows NT 10.0；Win64；x64）AppleWebKit/537.36（KHTML，如 Gecko）Chrome/76。 0.3809.132Safari/537.36

我注意到添加授权 header 后 Access-Control-Allow-Origin 消失，取而代之的是 Access-Control_Request-Headers。

前端感兴趣的代码如下

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 就会有一个 pre-flight 请求。但是我在服务器端没有做任何改变，所以我很困惑为什么服务器不会仅仅因为添加了 JWT 就提供合适的lCORS 响应。

任何指点将不胜感激。

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"

添加 JWT 授权后，CORS 无法工作 header

CORS fails to work once I add a JWT authorization header

cors

jwt

reactjs

flask-restful

axios