Custom Header problem with axios inside Redux

Question

I am trying to hit the login API with Custom header. First I got CORS error:

Access to XMLHttpRequest at 'URL' 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

Then I disabled CORS by NO CORS Plugin. Now Im getting:

Access to XMLHttpRequest at 'URL' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Below is my code:


    const userDetails = { email, password };

    let data = JSON.stringify({ 
          request : {
                    ascUser : 
                      {
                        userName : "[email protected]",
                        password : "12345678"
                      }
                    }
    })
    return dispatch => {

      axios.request('URL', {data:data},
        {headers: {
        'Content-Type': 'application/json',
        'x-transId' : '****',
        'x-channel-id' : '***' 
      }}
      )
      .then(res => res.json())
      .then(res => {
        console.log(res)
          if(res.error) {
              throw(res.error);
          }
          dispatch(
            userLogin({
            ...userDetails
          })
        );
          return res.products;
      })
      .catch(error => {
        console.log(error)
      }
      ) 
  };
}```

Enable CORS on your backend application. If you are using express, refer this expressjs.com/en/resources/middleware/cors.html — Murli Prajapati
What is the NO CORS Plugin? Something client or server side? — keul
is there any other way to do it without disabling the CORS in backend?Because its working fine in Android and POSTMAN. — Saran Kumar

Renaldo Balaj Renaldo Balaj · Accepted Answer · 2019-11-29T13:24:54

You need to use this https://www.npmjs.com/package/cors, on the backend (at your nodejs server maybe)

npm i cors --save

2.

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

Custom Header problem with axios inside Redux

1 Answers