Error OPTIONS net::ERR_CONNECTION_REFUSED

Question

I am developing a web application using "jQuery"(front-end) and "Python"(back-end). While making a PUT request to update details in the database, this is the error I get in the console:

OPTIONS "REST API URL" net::ERR_CONNECTION_REFUSED

My jQuery code is:

$.ajax({ 
    type: "PUT",
    url: "REST API URL",
    headers: {"Content-Type": "application/json", "Authorization": AuthToken},
    data: "details to be updated in database",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(data,status) {
      //do something with data
    },
    error: function(data,status) {
      //show error data and status
    }
)};

I read about how HTTP Requests other than GET and POST are first pre-flighted as OPTIONS request and only when it is a genuine request, it gets processed as a PUT/DELETE/PATCH request.
I saw solutions where it said that it might be a CORS issue, but CORS is enabled from the back-end to allow GET/POST/PUT/PATCH/DELETE requests. Further, I am successfully able to make GET and POST requests but no PUT requests are going through.
I am using "Chrome Dev Tools" and researched about how to fix this error for Chrome by clearing cache and cookies, flushing DNS and re-installing Chrome but none of the solutions have worked so far.
I am a making the front end UI and am not sure whether this is a client-side error or a server-side error?
Any help would be appreciated.

Answer 1

One thing is for sure, this is a backend problem. This happens when the cross origin communication between the backend and frontend is not connected properly. Considering you have imported cors and set up the middleware, most probably you have made a mistake using the PUT method in terms of the origin URL and request URL.

Things you can do:

1) Make sure both servers are running (the back-end and front end).

2) Look into google development tool and see the network section. Look at the request headers and the general. Make sure the request URL / backend has your backend server URL and the orgin / frontend has your frontend URL.

3) Make sure in your http.put() method, the domain you are feeding it matches the api you set up in your server.

4) Your issue is that your backend is not connected with your front end properly,so don't waste your time trying to find other errors. Focus on debuging the http.put() method and the cors module and middleware you have imported.

Answer 2

Given the fact it is really a CORS issue - browsers 'preflight' the request using OPTIONS method. After the OPTIONS request succeeds the actual request (in your case PUT) is made.

Make sure, the backend responds to OPTION requests. You could easily catch all OPTION requests and return 200 OK or 204 NO CONTENT.