How to enable the CORS mode on frontend side in GraphQL/AWS Amplify?(如何在GraphQL/AWS Amplify中启用前端CORS模式？)

本文介绍了如何在GraphQL/AWS Amplify中启用前端CORS模式？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何对AWS Amplify的GraphQL执行同样的操作？

fetch('https://trusted-api.co.jp', {
  mode: 'cors'
});

我既没有找到如何操作的文档，也没有找到提到CORS的源代码。

参考

常规的GraphQL操作可以调用如下：

import AWSAmplifyAPI, { graphqlOperation as graphQL_Operation, GraphQLResult } from "@aws-amplify/api";
import Observable from "zen-observable";

export default class DataBaseService {

  public static async sendRequestAndExtractDataFromResponse(
      graphQL_RawRequest: string,
      requestVariables?: object
  ): Promise<unknown> {

    const serverRawResponse: GraphQLResult | Observable<unknown> =
        await AWSAmplifyAPI.graphql(graphQL_Operation(graphQL_RawRequest, requestVariables));
   // ...
  }
}

推荐答案

您需要在服务器端配置此问题，因此服务器端需要批准此问题。

从技术上讲，您的Amplify lambda函数将添加类似以下内容的代码：

exports.handler = async (event) => {
  const response = {
    statusCode: 200,
    //  Uncomment below to enable CORS requests
    headers: {
      "Access-Control-Allow-Origin": "*",
    },

    //   headers: {
    //     "Access-Control-Allow-Headers" : "Content-Type",
    //     "Access-Control-Allow-Origin": "https://www.example.com",
    //     "Access-Control-Allow-Methods": "OPTIONS,POST,GET"
    // },
    body: JSON.stringify("Hello from Lambda!"),
  };
  return response;
};

这篇关于如何在GraphQL/AWS Amplify中启用前端CORS模式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！