将 Apollo 反应到不同端口上的 graphql-php 服务器

Posted 2023-03-08

【中文标题】将 Apollo 反应到不同端口上的 graphql-php 服务器

【英文标题】：React Apollo to graphql-php server on different ports

【发布时间】：2018-04-27 11:59:58

【问题描述】：

我正在尝试使用 Apollo 将我的 create-react-app 前端连接到我的 graphql-php 服务器。由于两者都在我的本地机器上的不同端口（分别为 3000 和 8080）上运行，我遇到了一些 CORS 问题。 Apollo 正在发送一个 OPTIONS 请求，然后抛出一个控制台日志消息：

 DOMException: Failed to execute 'postMessage' on 'Window': Error: Network request failed with status 200 - "OK" could not be cloned.
        at ApolloClient.hookLogger [as devToolsHookCb] (<anonymous>:14:14)
        at QueryManager.onBroadcast (http://localhost:3000/static/js/bundle.js:2585:27)
        at QueryManager../node_modules/apollo-client/core/QueryManager.js.QueryManager.broadcastQueries (http://localhost:3000/static/js/bundle.js:3659:14)
        at http://localhost:3000/static/js/bundle.js:3230:31
        at <anonymous>

希望任何人都可以提供有关如何让这两个人互相交谈的任何帮助！

前端 Apollo 配置：

const httpLink = new HttpLink(uri:'http://localhost:8080/temps_api/index.php'); //TODO: Separate into config file
const client = new ApolloClient(
    link: httpLink,
    cache: new InMemoryCache()
);

index.php

<?php
require_once 'vendor\autoload.php';
require_once 'core\bootstrap.php';

header('Access-Control-Allow-Origin: *');

use GraphQL\GraphQL;
use GraphQL\Type\Schema;
use Temps\Types\Types;

$schema = new Schema([
    'query' => Types::query()
]);

// $data = Data::parseInput();

var_dump(file_get_contents('php://input'));

//Test query
// $data = [
//   'query' => '
//     
//         user(email: "[e-mail]", password: "password") 
//             __typename,
//             username,
//             userType,
//             email
//         
//     '
// ];
//This method will vlidate the POST variables and turn them into $data array

$result = GraphQL::executeQuery(
    $schema,
    $data['query']
);

echo json_encode($result);

【参考方案1】：

您必须在回显结果之前设置一些标题。像这样

header('Content-Type: application/json', true, $httpStatus);
    if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') 
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']) && $_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'] == 'POST') 
        header('Access-Control-Allow-Origin: *');
        header('Access-Control-Allow-Headers: X-Requested-With, content-type, access-control-allow-origin, access-control-allow-methods, access-control-allow-headers');
    


header('Access-Control-Allow-Origin: *');
echo json_encode($result);
exit;