API Mesh // CORS not working

[SimonPa5]

Hello everyone,

I have set up an API mesh using the API Mesh Basics documentation (https://developer.adobe.com/graphql-mesh-gateway/mesh/). After that, I tried to execute a query from my local React application to retrieve the data, but it failed due to a CORS error. So, I added the following options to my mesh.json file:

{
...
  "responseConfig": {
    "CORS": {
      "origin": "*",
      "methods": [
        "GET",
        "POST",
        "OPTIONS",
      ],
      "maxAge": 60480,
      "credentials": true,
      "exposedHeaders": [
        "Content-Range",
        "X-Content-Range"
      ]
    }
  }
...
}

However, I am still getting a CORS error, and I can't figure out the issue. 

When I send a GET request to the GraphQL endpoint with parameters in the URL, it works. But a POST request doesn't work.

Does anyone have any ideas on how I can fix this?

React-APP Error: 

When i use the web interface (Yoga GraphQL Web Interface) after running the command "aio api-mesh run mesh.json" everything works fine.

Thanks

 

[naomirobichaud]

Hi,

When it comes to testing with localhost, passing in credentials and using configuration origin:"*" will not work with localhost. The best way to mitigate this is to start using a qualified domain vs localhost. Use a local DNS or WAMP server to setup a local domain name and use that instead of localhost or 127.0.0.1 (OS dependent step). Editing the hosts file is an option as well. This CORS troubleshooting guide sums up the options https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials

Please take a look at our docs on CORS to ensure that your configuration is correct: https://developer.adobe.com/graphql-mesh-gateway/mesh/advanced/cors/.

When specifying a CORS origin, best practice is to list all applicable origins.

Let us know how we can help.