1

我正在尝试使用 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()
});

索引.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: "jane@email.com", 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);
4

1 回答 1

0

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

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;
于 2017-12-17T06:57:03.280 回答