HTTP status code 405 error when adding headers to request

Question

I have a problem making get requests to a server when headers are being set with the Axios/http request. Any header I add (except the content-type header) causes the same error: "Response for preflight has invalid HTTP status code 405." This is true in Chrome, Firefox, Edge, etc.

Specifically, I need to add the Authorization header for account validation for a service I need to connect with.

Running a GET request on Postman using the API URI works fine and I get the required response. Running this in my React application in the browser gives me the HTTP 405 error. I'm running this on a local Node server with Google's Allow-Control-Origin extension installed and enabled using http://localhost:3000.

When I run the request without any header parameters:

axios.get("https://myrequest.com/req/reqservice.svc/Login",).then(data => console.log(data)).catch(err => console.log(err))

The request works fine. When I run it with headers (any header, but in my case, the Authorization header), I get the error:

axios.get("https://myrequest.com/req/reqservice.svc/Login", { headers: { "Authorization": "randomExample" } }).then(data => console.log(data)).catch(err => console.log(err))

So, what could be causing the issue? If it was a CORS or connection issue, wouldn't I have trouble making a request in general? I've been perusing Stack Overflow forever with no answer giving me the solution. I'm totally lost at what to do and I've been working on it for days already without a single solution. Any input would be much appreciated.

Solution 1

It is due to CORS. You need to specify the correct value for Access-Control-Allow-Headers server side for the preflight (OPTIONS) request (Documentation)

More details about CORS in general

Modify your server to add the missing header(s). From your question, you need to at least add Authorization value.

node js server

app.use(function (req, res, next) {
//...
res.setHeader('Access-Control-Allow-Headers', 'Authorization');

About Access-Control-Allow-Headers

The Access-Control-Allow-Headers response header is used in response to a preflight request to indicate which HTTP headers can be used during the actual request.

So, in your server side response, when setting Access-Control-Allow-Headers, you need to specify a list of comma-separated headers.

Access-Control-Allow-Headers: <header-name>, <header-name>, ...

You only need to specify it for custom headers, as by default some headers are already accepted.

The simple headers, Accept, Accept-Language, Content-Language, Content-Type (but only with a MIME type of its parsed value (ignoring parameters) of either application/x-www-form-urlencoded, multipart/form-data, or text/plain), are always available and don't need to be listed by this header.

So in your case it works if you just specify Content-type because Content-Type is accepted by default (as explained just above)

Note If the value for Content-type is not of one of the types above (e.g. if you submit your authorization request as application/json), then you need to add it in the list (comma-separated)

node js server

app.use(function (req, res, next) {
//...
res.setHeader('Access-Control-Allow-Headers', 'Authorization, Content-Type');

Solution 2

If you want to make all routes cors enabled add the following script to your index.js.

app.use(function (req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
    res.setHeader('Access-Control-Allow-Credentials', true);
    next();
});

If you want to make only a single route cors enabled you can enable it like this:

router.get('/corspage', function(req, res) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
    res.setHeader('Access-Control-Allow-Credentials', true);
    res.send('cors problem fixed:)');
});

If you are OK with using additional package for that you can use cors package to do it with lot less code. Install the package and add the following code to index.js.

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

app.get('/products/:id', function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for all origins!'})
})

If you want to enable single route with cors package:

var express = require('express')
var cors = require('cors')
var app = express()

app.get('/products/:id', cors(), function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for a Single Route'})
})

Comments

[Munim Munna]

I misunderstood the question so horribly ☹️

[David]

@MunimMunna the 405 error can also be what you said, but since it seems to be working with content-type I thought it could be just the headers

[Munim Munna]

I have deleted my answer because it does not solve the issue. The issue is about allowing Authorization header.

[Mabeh Al-Zuq Yadeek]

Thanks for your answer.