異なるポートのgraphql-phpサーバにApolloを反応させよう

Question

私は、自分のcreate-react-appフロントエンドを、Apolloを使ってgraphql-phpサーバに接続しようとしています。両方とも私のローカルマシン（それぞれ3000と8080）の異なるポートで動作しているので、私はいくつかのCORSの問題を取り上げています。誰もがこれら二つはお互いに話を取得する方法へと提供することができると任意の助けが大好きだ

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> 

： アポロは、その後のコンソールログメッセージを投げているOPTIONSリクエストを送信しています！

フロントエンドアポロの設定：

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: "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); 

Answer 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;