Проблемы с CORS и JSON

Question

У меня есть клиент, написанный на Javascript (реагировать), который работает на localhost: 3000 Здесь у меня есть кнопка, которая отправляет учетные данные в мой бэкэнд, написанные на python и использующие колбу. Конечная точка работает на localhost: 5000 / login.

Мой код внешнего интерфейса выглядит следующим образом:

loginToDatabase = async () => {
    console.log("login to database. user: " + this.state.user+" pw: "+this.state.password);     

    const response = await fetch("http://localhost:5000/login",{
        method: 'POST',
        body: {
            "user": this.state.user,
            "password": this.state.password
        }, 
        headers: {
            "Content-Type": "application/json"
        }
    });
    console.log("response: "+response)
};

Мой внутренний код выглядит следующим образом:

@app.route("/login", methods=['POST'])
def login():

    jsonRequest = request.get_json()
    receivedUser = jsonRequest.get('user')
    receivedPassword = jsonRequest.get('password')

isConnected = opendatabase.openDatabase('localhost',receivedUser,receivedPassword)

if(isConnected == True):
    body = json.dumps({
        "connection":isConnected,
    })

    jsonResponse = Response(
        body,
        mimetype="application/json",
        headers={
            "Access-Control-Allow-Origin" : "*",
        }
    )
    return (jsonResponse)
else:
    body = isConnected

    jsonResponse = Response(
        body,
        headers={
            "Access-Control-Allow-Origin" : "*",
    )
    return (jsonResponse, 401)

ТестированиеAPI с Почтальоном работает как положено. Однако, используя внешний интерфейс, я получаю эту ошибку:

Access to fetch at 'http://localhost:5000/login' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

После некоторых исследований я выяснил, почему это происходит, и что мне нужен заголовок

"Access-Control-Allow-Origin" : "*"

, который я включил. Но все равно не смог заставить его работать. Затем я читаю здесь https://developer.mozilla.org/de/docs/Web/HTTP/CORS, который не работает с application / json.

Единственные допустимые значения для заголовка Content-Type: application / x-www-form-urlencoded,multipart / form-data, text / plain

Однако я также читаю здесь Не удается отправить запрос на публикацию, когда для параметра «Тип контента» установлено значение «application / json» что я могу установить заголовок

->header('Access-Control-Allow-Headers', 'Content-Type');

, который я тоже попробовал так:

if(isConnected == True):
    body = json.dumps({
        "connection":isConnected,
    })

    jsonResponse = Response(
        body,
        mimetype="application/json",
        headers={
            "Access-Control-Allow-Origin" : "*",
            "Access-Control-Allow-Headers": "Content-Type",

        }
    )
    return (jsonResponse)
else:
    body = isConnected

    jsonResponse = Response(
        body,
        headers={
            "Access-Control-Allow-Origin" : "*",
            "Access-Control-Allow-Headers": "Content-Type"
            }
    )
    return (jsonResponse, 401)

Но это тоже не работает. Есть также много других сообщений на эту тему, но до сих пор я не мог найти решение. Я также новичок в API и веб-разработке. И также я думаю, что мой показанный процесс входа в систему далек от совершенства. На самом деле речь идет только о том, чтобы заставить работать вызов REST.

Есть ли способ решить эту проблему и все еще использовать JSON? Конечно, я мог бы использовать что-то вроде text / plain, но это не было бы удовлетворительным.

Также (может быть связано), если я использую text / plain в веб-интерфейсе, я не получаю сообщение об ошибке, но в бэкэнде я не знаю, как получать данные, отправляемые через POST. Как вы можете видеть на прикрепленной картинке, я, кажется, получил пустой объект?

Где моя ошибка и как лучше всего ее решитьэта проблема с JSON?