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

Posted 2023-03-08

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

【英文标题】：Cannot use GraphQL queries in React - has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

【发布时间】：2018-02-14 02:10:43

【问题描述】：

我有一个 React 应用程序，它连接到一个后端 Laravel 应用程序，该应用程序顶部有一个 GraphQL 层。

我有一个这样的 GraphQL 查询：

http://laravel-quarx.dev/graphql?query=query+getUserNameAndIdusersid,name

这将返回以下 JSON：

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

这是我在 React 中获取这些数据的方式（我使用的是 Redux，所以我在 Saga 中调用）：

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

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

这会导致以下错误：

XMLHttpRequest 无法加载 http://laravel-quarx.dev/graphql/?query=query+getUserNameAndIdusersid,name。 重定向自 'http://laravel-quarx.dev/graphql/?query=query+getUserNameAndIdusersid,name' 到 'http://laravel-quarx.dev/graphql?query=query+getUserNameAndIdusersid,name' 已被 CORS 策略阻止：没有“访问控制允许来源” 请求的资源上存在标头。起源 'http://localhost:3000' 因此不允许访问。

我不确定我必须在服务器端应用程序上做什么才能绕过 CORS 限制，有什么想法吗？

编辑：

标题：

Cors 配置：

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,
];

【问题讨论】：

试试这个https://github.com/barryvdh/laravel-cors

@Panther 我尝试了那个确切的包，但仍然遇到同样的问题。

您是否设置了config/cors.php，如他们的 github 自述页面所示，您是否发布了相同的内容？如果是这样，您可以显示选项请求的response 标头吗？

@Panther 是的，我做的完全一样，请参阅标题的编辑。

看起来不存在 CORS 标头。 allowedOrigins、allowedHeaders 和 allowedMethods 之类的标头应该出现在 options 请求的 response 中。因此，您的配置或服务器中缺少某些内容，您必须找出这些内容。

【参考方案1】：

你有两个选择，一个是让你的应用程序理解 cors，第二个是在你的 apollo 客户端的 fetch 选项中禁用 cors：

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