1

I am trying to create a headless drupal app. i am using drupal 8 as a beckend and react as a front-end. i have created REST services in drupal 8 using core rest services module. the problem is when i am calling the api its giving me error i.e

Fetch API cannot load http://192.168.1.246/headless-react/api/events. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 403. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I configured the services.yml file for cors.config but still getting error. can anyone have any idea how to solve it ? thanks

Anuj Kumar
  • 160
  • 1
  • 2
  • 11
  • Obviously didn't configure it properly – charlietfl Oct 23 '17 at 12:06
  • 1
    It may be giving this error because here your localhost is trying to access your ip (192.168.1.246). Try hosting your webpages on your ip or host your server on localhost. – aquaman Oct 23 '17 at 12:13
  • 1
    Did you check response server provides? Is there really 'Access-Control-Allow-Origin' header or not? There is a really nice program for testing, called "Postman": https://www.getpostman.com/postman – MilanG Oct 23 '17 at 12:47
  • Launch your browser console and go to the Network tab. Check the resource under XHR and see the Access Control Allow Origin header. You may also want to check MetaTag module, that it is setting the correct Referrer Policy. – stacey.mosier Oct 25 '17 at 23:53

3 Answers3

1

Install the CORS module https://www.drupal.org/project/cors

It will allow you to overcome the error related to cross origin

Vernit Gupta
  • 339
  • 1
  • 10
0

I am using extension for it. The reason why you get this warning because you called api from another domain. Or you you can use nginx.

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Nurlan Mirzayev
  • 1,120
  • 1
  • 7
  • 15
0

You need to mention what build tools are you using in your front end which uses ReactJS. Assuming that you are using webpack, you will need to add a proxy in the package.json located at the root directory, like so :

package.json

...
"name": "relay-starter-kit",
"proxy":"<your-base-remote-server-url-here",
"private": true,
...

For instance, if your server is at https://www.myawesomeserver.com, then "proxy": "https://www.myawesomeserver.com".

In your case, "proxy":"http://192.168.1.246" , should work.

In your application, if you need to access the route, https://www.myawesomeserver.com/home, then you just need to pass the route and webpack will pick up the base url from proxy in package.json A request for home will look like,

const getHome = async() => {
  try{
    const raw = await fetch('/home')
    const res = await raw.json()
  } catch(e) {
    console.log(e)
 }
}

This is because when you run webpack, it runs the react app on its webpack dev server and for you to communicate with any other server, webpack will have to make a request on your behalf. If you are not using webpack, this may not be useful for you.

GulshanZealous
  • 638
  • 8
  • 9