0

I'm trying to use react-axios to query a graphql endpoint but I'm encountering a problem with CORS.

Access to XMLHttpRequest at 'https://rickandmortyapi.com/graphql' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Here it is my setup:


const characterQuery = `{
    characters(page: 2, filter: { name: "rick" }) {
      info {
        count
      }
      results {
        name
        status
        species
        gender
        image
      }
    }
  }`


const axiosInstance = axios.create({
    data: characterQuery,
    headers: {"Access-Control-Allow-Origin": "*"}
})


<AxiosProvider instance={axiosInstance}>
<Post url="https://rickandmortyapi.com/graphql">
                    {(response: any) => {
                        console.log(response);
                    }}
</Post>
</AxiosProvider>

Can someone help me? Thanks

Luca Natale
  • 79
  • 1
  • 8
  • CORS is controlled on the server and you set up allow permissions there. Do you have access to the server? You will want to allow localhost:3000 there if you can. Or you can go into your hosts file on your machine and map localhost torickandmortyapi.com but that is annoying to set up. – Colin Hale Jul 18 '22 at 23:12
  • it is a public api, so i cannot access to the server. https://rickandmortyapi.com/documentation – Luca Natale Jul 18 '22 at 23:14
  • Does this answer your question? [No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API](https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe) – Phil Jul 18 '22 at 23:27
  • `Access-Control-Allow-*` are **response** headers that come from the server. They do not belong in your request and in general will more than likely result in errors like _"Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers"_. – Phil Jul 18 '22 at 23:27
  • `data` is not something you should be passing to a `axios.create()`. Also, what is ``? How does it use the `AxiosProvider`? – Phil Jul 18 '22 at 23:30
  • thank you for the hints.. i was following a tutorial online that i've seen it's all wrong. I was trying to use react-axios (component based axios package) to call a graphql service but i can't find exaustive documentation online that helps me. by the way, here it is the package https://www.npmjs.com/package/react-axios – Luca Natale Jul 18 '22 at 23:37

1 Answers1

-1

CORS is a pain, always, the problem is that the header you pass is the one the server should give you.

You can't force the server to pass the header if they don't already, that the whole point of this protection, avoiding hacker pretending to be other ppl websites.

So the API you are trying to reach must have the CORS header or it will not work

You can play around with fetch see if you have better luck than axios.

Fetch provide some amount of control over your CORS settings, https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

fetch('https://rickandmortyapi.com/graphql', {
  method: 'POST',
  mode: 'cors',
  headers: { "content-type": "application/json" },
  body: JSON.stringify({
    query: `{
  character(id: 1) {
    name
  }
}`
  })
})

This request work with fetch for me, uppon testing, if the content-type was not set to application/json the server failed with error 500 instead of showing a 400 bad request

Edit again, it works with axios too, are you sure you get a CORS error ?

kigiri
  • 2,952
  • 21
  • 23