다른 포트의 graphql-php 서버에 Apollo에 반응하십시오.

Question

아폴로를 사용하여 create-react-app 프론트 엔드를 내 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;