Missing @http headers

[pr0g]

Amplify CLI Version

12.13.1

Question

I have been trying to use the @http resolver feature in Amplify with Transformer V2 by following the helpful docs here.

The request is working, but when I try and set custom headers I am not seeing them arrive at the endpoint I'm using.

In my case, I'm calling an Azure Function App Function. I have something in my schema.graphql file that looks like this:

type Query {
  myCustomHttpEndpoint(queryValue: String!): String
    @http(
      url: "https://my-custom-endpoint.azurewebsites.net/api/my_custom_endpoint"
      method: GET
      headers: [{ key: "ExampleHeaderKey", value: "ExampleHeaderValue" }]
    )
}

When I make the request, the function is called as expected, but the headers do not appear. I'm not 100% sure if they're not being set/sent by Amplify/AppSync, or they're being filtered by the Azure Function App.

I've turned monitoring on for the AppSync queries, and I don't see the new header key/value in the CloudWatch logs, I also don't see the header key/value in the Network tab of the Chrome Developer Tools when the request happens (this may be expected as the header is forwarded from AppSync to the HTTP endpoint).

If someone could please clarify when/where I might be able to view the headers on the AppSync side to check things are being sent correctly that would be incredibly helpful. It's possible I'm doing something wrong. If I can get a simple static header key/value to work, the aim is to then forward the authorization header to later use in the Azure Function App Function, something like this...

headers: [
    {
      key: "Authorization"
      value: "$context.request.headers.Authorization"
    }

But I didn't have much luck with that either, for full context the generated Query.myCustomHttpEndpoint.DataResolver.req.vtl file looks like this:

## [Start] Create request. **
#set( $headers = $utils.http.copyHeaders($ctx.request.headers) )
$util.qr($headers.put("accept-encoding", "application/json"))
$util.qr($headers.put("HeaderKey", "HeaderValue"))
{
  "version": "2018-05-29",
  "method": "GET",
  "resourcePath": "/api/my_custom_endpoint",
  "params": {
      "headers": $util.toJson($headers),
      "query": $util.toJson($ctx.args.query)
  }
}
## [End] Create request. **

Thank you very much for your help!

[ykethan]

Hey,👋 thanks for raising this! I'm going to transfer this over to our API repository for better assistance 🙂

[AnilMaktala]

Hey @pr0g, Thank you for bringing this up. I was able to reproduce the issue and have marked it as a bug for the team to investigate further.

[pr0g]

Hi @AnilMaktala, no problem and thank you for following up.

While looking into this further, I was able to reproduce the problem by using the plain fetch API, so this might not specifically be an AppSync/Amplify issue. I think it might be necessary to use the HTTP OPTIONS method and handle this in the Azure Function App call explicitly to allow the headers to be sent to work around CORS (I still couldn't get it to work unfortunately, but I think it should be possible, this article has some more info).

I'll try and follow-up in the new year if I have any more luck, if you are able to find a similar problem and solution with Amplify please let me know! 😅

Thank you! (and happy holidays/new year!)

[bobbyu99]

@pr0g I tried to repro this issue. I use AppSync API to send a GET request to API Gateway. From API Gateway's logs, I can see that it's receiving the headers from AppSync API as expected. I then try to send the request to Lambda, and I'm still unable to see the headers in Lambda's logs.

I suspect that some config of the API Gateway and/or Lambda (or Azure in your case) might not have let the headers pass through.