Cross Origin Problem with Flask Api (Access-Control-Allow-Origin)

Question

Hello all good people.

I have tested everything that I can find on internet and nothing is working to fix this problem. I'm really hoping that someone here can help me solve this.

When i try to do "patch" request from backend to my flask API I get this error (GET, DELETE & PUT are working fine):

Access to fetch at 'https://MYAPI-NOTREALURL.com' from origin 'https://MYBACKEND-NOTREALURL.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values 'https://MYBACKEND-NOTREALURL.com, *', but only one is allowed. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

This is how my code for API is written:

from flask_cors import CORS, cross_origin
from flask import render_template, redirect, flash, request, url_for, jsonify, session, make_response
from flask_restful import Api, Resource, reqparse
import requests

app = Flask(__name__)
cors = CORS(app, resources={r"/*": {"origins": "*"}})
api = Api(app)

class ordersByID(Resource):
    def get(self,ID_ORDER):
        ****
        return jsonify(data)

    def patch(self,ID_ORDER):
        req321 = request.form
        result = updateOrder(req321,ID_ORDER)
        return result

    def delete(self,ID_ORDER):
        ****
        return result

    def put(self,ID_ORDER):
        ****
        return result
api.add_resource(ordersByID, "/orders/id/<string:ID_ORDER>")
if __name__ == '__main__':
app.run(debug=True)

I have tested everything that I can find on internet and nothing is working when trying to do patch request. I'm doing patch request with fetch from popup window.

<form action="{{ **https://MYAPI-NOTREALURL.com** }}" id="popupForm" method="patch" onsubmit="formFetch(event,this,'patch')">

You can check javascript code under.

function formFetch(e,form,method) {
  result = fetch(form.action, {method:method, body: new FormData(form)})
  .then(response => response.json())
  .then(data => document.getElementById('submitedFormConfirmationText').innerHTML = data['DB_Result']
  );
  e.preventDefault();
  document.getElementById('submitedFormConfirmation').style.display = 'inline';
};

I really hope that someone can help me solve this problem without needing to redo whole code?

Answer 1

I managed to solve this.

For some strange reason "patch" with small letters was working on local but when deployed it did not work.

Changing method from "patch" to "PATCH" solved this problem.