Reagieren Apollo graphql-php-Server auf verschiedenen Ports

Question

Ich versuche, meine erstellen reagieren-App-Frontend zu meinem graphql-php-Server mit Apollo zu verbinden. Da beide laufen auf verschiedenen Ports auf meinem lokalen Rechner (3000 und 8080 jeweils) Ich habe einige CORS Probleme bekommen. Apollo sendet eine OPTIONS-Anforderung, die dann eine Konsole Protokollmeldung von wirft:

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> 

Würde gerne jede Hilfe, dass jemand erhalten zur Verfügung stellen kann, wie diese beiden miteinander zu reden!

Frontend Apollo config:

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

Sie haben Recht, ein paar Header setzen, bevor Sie die Ergebnisse Echo aus. Gefällt Ihnen dieses

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;