Making a post request to a Django app on MS Azure from a client that I do not own getting cors error

Question

I have deployed a django app on azure and have been running it for a while. I recently added an endpoint to my app that should get a POST request from another website which I do not own: https://v3.jengahq.io. However, I am able to send requests from this website to my endpoint and see their responses. Everytime I simulate my POST request, I get an error:

Access to fetch at 'https://notification-webservice.azurewebsites.net/socket.io/?EIO=4&transport=polling&t=Otk_q_I' from origin 'https://v3.jengahq.io' has been blocked by CORS policy: 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. However, from my app, I have enabled cors-origin for this website. It also requires a basic authentication header which I think have added appropriately as shown below:

CSRF_TRUSTED_ORIGINS = (
    ["https://" + os.environ["WEBSITE_HOSTNAME"],
     "https://v3.jengahq.io",
]
    if "WEBSITE_HOSTNAME" in os.environ
    else []
)
CORS_ALLOWED_ORIGINS = [
            "https://red-moss-032827b03.4.azurestaticapps.net",
            "https://v3.jengahq.io",
            "https://uat.finserve.africa",
]

CORS_ALLOWED_HEADERS = [
    'Accept',
    'Accept-Encoding',
    'Authorization',
    'Content-Type',
    'Origin',
    'X-CSRFToken',
    'X-Requested-With',
]

The first website in my cors allowed is where my frontend is served and I am able to run requests well. This does not work for the second website. When I remove my frontend from my cors allowed list, I get a similar error, but the server/endpoint seems different Access to fetch at 'https://mysite.azurewebsites.net/login' from origin 'https://frontend.com.' has been blocked by CORS policy: 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. Including the v3.jengahq.io website does not remove the error though. I have also tried to configure cors on azure, but turns out that it's not advisable once I have implemented it within app, which is more ideal.

I have also been able to test my endpoint with postman and it works well. What could I be doing wrong? Why is the first error pointing at 'notifications-webservice...' as my endpoint?

Answer 1

@Andrew Kimani One thing you could try is to add the 'Access-Control-Allow-Origin' header to the response from the 'notification-webservice.azurewebsites.net' endpoint. This header should include the origin of the client making the request, in this case 'https://v3.jengahq.io'.

In your case, you need to add this header to the response from the 'notification-webservice.azurewebsites.net' endpoint to allow requests from the 'https://v3.jengahq.io' origin. To add the 'Access-Control-Allow-Origin' header to the response, you can modify the code that handles the request on the 'notification-webservice.azurewebsites.net' endpoint. Here's an example of how to add the header in Python:

from flask import Flask, jsonify, request

app = Flask(__name__)

@app.route('/your-endpoint', methods=['POST'])
def your_endpoint():
    # your code here
    response = jsonify({'message': 'success'})
    response.headers.add('Access-Control-Allow-Origin', 'https://v3.jengahq.io')
    return response

In this example, the 'Access-Control-Allow-Origin' header is added to the response using the 'add' method of the 'headers' attribute of the response object. The value of the header is set to 'https://v3.jengahq.io', which is the origin of the client making the request. If you do not have control over the 'notification-webservice.azurewebsites.net' endpoint, you could try reaching out to the owner of that endpoint to see if they can add the 'Access-Control-Allow-Origin' header to their responses.