CODEWITHSUNDEEP
reactjsreduxcorsxmlhttprequestaxios
Saran Kumar
Saran Kumar

Reputation: 79

Custom Header problem with axios inside Redux

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)
      }
      ) 
  };
}```

Upvotes: 0

Views: 422

Answers (1)

Renaldo Balaj
Renaldo Balaj

Reputation: 2440

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

  1. npm i cors --save

2.

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

Upvotes: 1

Related Questions