CODEWITHSUNDEEP
javascriptcorsaxios
DharmikSoni
DharmikSoni

Reputation: 59

cors enabled axios get request getting failed

having 2 api's. method POST-Login method GET-data. and server has cors enabled. Login api working fine, but when call api with GET method it gets failed. Code:

->api Login-POST

const login = async (email, password) => {
  console.log("in auth service");
  const userDetail = {
    username:email,
    // email,
    password
  };

  try {
    // unsetHeadersWithUserToken();
    const afterSuccess = await api.post(apiDetail.auth.url,  userDetail); 

    if (afterSuccess) {
      return afterSuccess.data;
    }
  } catch (error) {
    console.log("error: ", error.response.error);
    if (error.category === 'User Permissions') {
      // forceLogout();
    }
    throw error;
  }
};

->api-GET

try{
    // console.log("url : ", apiDetail.partnerLocations.url);
let token = sessionStorage.getItem('token');
setHeadersWithUserToken(token);
    let apiResponse = await api.get(apiDetail.partnerLocations.url);
    return apiResponse;
}catch(error){
    console.info('##### demand-response.js:11 #####');
    console.info('========================= Start =========================');
    console.error('error = ', JSON.stringify(error));
    // console.log(error.response.data)
    console.info('========================== End ==========================');
    throw error;
}

->axios call

   import axios from 'axios';
import { environment } from '../../utils/constants';

let api;
let apiDetail = {
  baseURL: environment.baseURL,
  headers: {
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*'
  }
};
const setAPI = apiDetail => {
  api = axios.create(apiDetail);
};
setAPI(apiDetail);
const setHeadersWithUserToken = token => {
  api.defaults.headers.common['Authorization'] = token;
};
export {
  api,
  setHeadersWithUserToken,
};

Image-1 enter image description here showing console error

Image-2 enter image description here network call response

Upvotes: 0

Views: 100

Answers (2)

Uladzislau Ulasenka
Uladzislau Ulasenka

Reputation: 582

Add the "proxy" property (found at the bottom here) to package.json:

"proxy": "http://localhost:<PORT-GOES-HERE>"

Now, instead of making HTTP requests like this:

axios.get("http://localhost:8080/example")

You should write them like this:

axios.get("/example")

Upvotes: 1

Amit Khare
Amit Khare

Reputation: 231

Try this

const proxyurl = "https://cors-anywhere.herokuapp.com/"
cosnt url = 'Your URL'
axios.get(proxyurl + url)

I faced the same issue and this works nicely.

Upvotes: 1

Related Questions