0

i got an error when trying to access some API from web called rajaongkir api it shows an error 400 and no access control origin. it's need a header 'key' to work i already test it on postman and it works well. please help me

Code: 

componentDidMount(){
  const key = {

      method: 'GET',
      headers: { 'key': '11sss8ba9eeb9e4845c01edc3e62e62b80b', 'content-type': 'application/json' },
      url: 'https://api.rajaongkir.com/starter/province'

  }
  axios(key).then(response => {
     this.setState({ provinsi: response.data.results });
   }).catch(error => {
     console.log(error)
   })
}

error:

Failed to load resource: the server responded with a status of 400 (Bad Request)
:8000/#/profil:1


Access to XMLHttpRequest at 'https://api.rajaongkir.com/starter/province' from origin 'http://127.0.0.1:8000' 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.

i have tried allowing origin access and it's just removing the No "access-control.." but still got blocked by cors policy

Naufal Syauqi
  • 7
  • 5
  • It will help you. Cors policy error handled from API. See this https://stackoverflow.com/a/58835950 – Shashwat Prakash Nov 20 '19 at 07:47
  • https://stackoverflow.com/questions/58907648/google-recaptcha-responds-with-405-error-and-cors-message – Jay Chuah Nov 20 '19 at 09:59
  • While running your app in webpack dev server with create-react-app or react-scrpts you can [set up a proxy](https://create-react-app.dev/docs/proxying-api-requests-in-development/). If your app in production is on another domain, sub domain or port then make sure it provides the correct CORS headers. – HMR Nov 20 '19 at 10:02

1 Answers1

0

install Allow CORS: Access-Control-Allow-Origin extension in the browser

https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en

Jodeveloper8
  • 104
  • 1
  • 5
  • doesn't work. it just remove the "no-access" word. the error are still the same – Naufal Syauqi Nov 20 '19 at 10:06
  • installing extension is not a solution. you would not ask your customer to install that in their browser to access your website. There are 2 solution for this kind of error: send your request to a proxy or build your own proxy. The main thing to understand is this kind of error happen only from frontend to server. Same origin policy is not enforced within server-to-server communication. – Anthonius Jul 02 '20 at 18:40