0

I am currently new in ReactJS and facing problem regarding getting the response of API the console log shows of error of this

Access to XMLHttpRequest at 'https://facebook.github.io/react-native/movies.json' from origin 'http://localhost: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.

they recommend to me that I use the barryvdh/laravel-cors to allow the cors in my API. I will show you guys my front-end code.

componentDidMount() {
    axios.get('https://facebook.github.io/react-native/movies.json',{
    }).then(function(response){
        console.log(response)
    })
}

In my logs, I will share here the captured image.

enter image description here

Aditya Thakur
  • 2,562
  • 2
  • 10
  • 21
ARL ARL
  • 9
  • 1

2 Answers2

1

The error is in your Axios request itself, if you clearly see

axios.get('https://facebook.github.io/react-native/movies.json',{})

You've an additional parameter, While you are not passing any headers or other parameters, if you remove the {} then it should work.

axios.get('https://facebook.github.io/react-native/movies.json')

And if you see the results of your console you can see on where it clearly states that OPTIONS request is throwing a 405 status code,

from MDN

The HyperText Transfer Protocol (HTTP) 405 Method Not Allowed response status code indicates that the request method is known by the server but is not supported by the target resource.

You'll need to directly access the resource, probably your axios is generating Pre Flight Request with OPTIONS header due to {}, which is being rejected by the resource itself.

You can also try doing it with a simple fetch request,

fetch('https://facebook.github.io/react-native/movies.json')
  .then(function(response) {
    console.log(response.json())
  })
Aditya Thakur
  • 2,562
  • 2
  • 10
  • 21
  • Nothing to do with fetch and axios. It's an issue of CORS. – Object object May 10 '19 at 09:31
  • @KashyapMerai Sorry, its not the cors issue, as the resource is available at public domain and can be accessed from any client and `Access-Control-Allow-Origin` header is set to wildcard. https://imgur.com/a/Ytsi07V see it for yourself. – Aditya Thakur May 10 '19 at 16:01
-1

CORS is controlled by backend API and in your case, you don't have control over it which is https://facebook.github.io/react-native/movies.json.

Browser prevents your code from accessing the response because of the browser can't see Access-Control-Allow-Origin in response.

Things can still get working by making the request through a Proxy can where a proxy sends appropriate CORS header on behalf of your request.

const proxy = "https://cors-anywhere.herokuapp.com/";
const url = "https://facebook.github.io/react-native/movies.json"; 
fetch(proxy + url)
  .then(response => response.text())
  .then(contents => console.log(contents))
  .catch(() => console.log("CORS Error" + url ))

Making a request through a proxy will work this way

  1. CORS proxy will forward your request to https://facebook.github.io/react-native/movies.json
  2. Return response from https://facebook.github.io/react-native/movies.json with Access-Control-Allow-Origin headers.
  3. Now your browser can see Access-Control-Allow-Origin headers present in the response header.

For more detail explanation you can check out this

https://stackoverflow.com/a/43881141/2850383

Object object
  • 872
  • 6
  • 18