CORSでGraphqlを実行する方法

Question

私はこれに関するいくつかの記事を読んだことがありますが、それらのどれも私にとっては役に立たないものです。

https://github.com/graphql/express-graphql/issues/14

は、ここに私のexpressjsコードです：

app.use("/graphql", function (req, res, next) { 
    res.header('Access-Control-Allow-Origin', 'http://localhost:8080'); 
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With'); 
    if (req.method === 'OPTIONS') { 
    res.sendStatus(200); 
    } else { 
    next(); 
    } 
}); 


// apply graphql middleware 
app.use('/graphql', graphqlHTTP({ 
    schema: schema, 
    rootValue: rootResolver, 
    graphiql: true, 
})) 

私はこのようにそれを行う場合は、事前にフライトオプションが成功したが、実際のP​​OST要求は失敗します。

私はこの関数を使ってローカルのgraphqlサーバにリクエストしています。ここ

function postFn(url, payload) { 
    return $.ajax({ 
    method: 'POST', 
    url: url, 
    contentType: 'application/json', 
    xhrFields: { 
     withCredentials: true 
    }, 
    data: payload 
    }); 
} 

POSTリクエストをトリガするフロントエンドコードである：

let query = ` 
    query myqury($offset: Int, $limit: Int) { 
     clients(limit:$limit , offset:$offset) { 
     docs{ 
      _id 
      full_name 
     } 
     total 
     limit 
     offset 
     } 
    } 
    ` 
    var variables = { 
    offset: offset, 
    limit: limit 
    } 
    let payload = { 
    query: query, 
    variables: variables 
    } 
    return request.post(graphQlEndpoint, payload) 

エラーメッセージがある：

いいえ「アクセス制御 - 許可原点」ヘッダが上に存在する

要求されたリソース

Answer 1

私はVueクライアントを使用して呼び出しを行うときに同じ問題がありました。私が解決できる唯一の方法は、テスト目的でブラウザのクロスオリジン制限を無効にすることでした。

const graphQLServer = express(); 
 
const corsOptions = { 
 
    origin(origin, callback) { 
 
     callback(null, true); 
 
    }, 
 
    credentials: true 
 
}; 
 
graphQLServer.use(cors(corsOptions)); 
 
var allowCrossDomain = function(req, res, next) { 
 
    res.header('Access-Control-Allow-Origin', '*'); 
 
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS'); 
 
    res.header('Access-Control-Allow-Headers', 'Content-Type,token'); 
 
    next(); 
 
} 
 
graphQLServer.use(allowCrossDomain);

が、私はこれがあなたの問題を解決するかもしれないと思うあなたのserver.jsファイルのコードの下に

Answer 2

挿入してください