无法在React中使用GraphQL查询-已被CORS策略阻止：所请求的资源上不存在“ Access-Control-Allow-Origin”标头

Question

I have a React application that connects to a back-end Laravel application that has a GraphQL layer on top of it.

I have a GraphQL query as such:

http://laravel-quarx.dev/graphql?query=query+getUserNameAndId{users{id,name}}

Which will return the following JSON:

{"data":{"users":[{"id":1,"name":"Admin"},{"id":2,"name":"Saqueib Ansrai"}]}}

Here is how I fetch this data in React (I am using Redux so I have my call in the Saga):

function* fetchProducts(actions) {
    try {
        const response = yield call(fetchApi, {
            method: 'GET',
            url: '?query=query+getUserNameAndId{users{id,name}}',
        });

        yield put(productSuccess(response));
    } catch (e) {
        yield put(productFailure(e.response ? e.response.data.message : e));
    }
}

This results in the following error:

XMLHttpRequest cannot load http://laravel-quarx.dev/graphql/?query=query+getUserNameAndId {users{id,name}}. Redirect from ' http://laravel-quarx.dev/graphql/?query=query+getUserNameAndId {users{id,name}}' to ' http://laravel-quarx.dev/graphql?query=query+getUserNameAndId {users{id,name}}' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:3000 ' is therefore not allowed access.

I am unsure as to what I have to do on my server-side application to bypass the CORS limitations, any ideas?

EDIT:

Headers:

Cors config:

return [
    /*
    |--------------------------------------------------------------------------
    | Laravel CORS
    |--------------------------------------------------------------------------
    |
    | allowedOrigins, allowedHeaders and allowedMethods can be set to array('*')
    | to accept any value.
    |
    */
    'supportsCredentials' => false,
    'allowedOrigins' => ['*'],
    //Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Cache-Control
    'allowedHeaders' => ['*'],
    'allowedMethods' => ['*'], // ex: ['GET', 'POST', 'PUT',  'DELETE']
    'exposedHeaders' => [],
    'maxAge' => 0,
];

Answer 1

You have two options, one is making your application to understand cors, and the second is to disable cors in the fetch options in your apollo client:

const link  = new HttpLink({
        uri: 'URI',
        fetchOptions: {
            mode: 'no-cors'
        }
    });