AWS API gateway: why is the invoke url returning HTML code instead of actual web page?-CodePudding

I am building my app in AWS.

I have deployed my Reactjs frontend project in an EC2 instance. Instead of users from the external internet world visiting my EC2 instance directly, I want to put it behind the AWS API Gateway. So AWS API Gateway would be the single entry point to my app's frontend and backend services.

After some research on how to connect API Gateway and EC2 Instance, I figured this is the plan to go with:

external world ---> AWS API Gateway ---> VPC Links ---> Network Load Balancer ---> my VPC Target Group / EC2 instances

Here is what I have done:

Reactjs Frontend project is running well in EC2 instance; I can visit the webpage with EC2 instance's public ip address.
Well configured Target Group and Network Load Balancer. I confirmed by inputting the NLB's DNS name in a browser, i.e. http://myapp-frontend-NLB-c11112esd43524rw.elb.ap-northeast-1.amazonaws.com, and it successfully loads / opens my app's frontend webpage.
I have followed this aws doc: https://docs.aws.amazon.com/apigateway/latest/developerguide/getting-started-with-private-integration.html step by step and configured the VPC link, API Resources, Integration Type, etc.

I have only created one API: ANY / , which accepts any Method on basic path and is supposed to pass HTTP requests to Network Load Balancer and then EC2 instance.

After deploying the created API and when I click open the Invoke URL, (in the form of https://123qwe123qe.execute-api.ap-northeast-1.amazonaws.com/[stage]), I can see the following HTML code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
   
    ...

    <title>MY APP Title Name String</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  <script src="/static/js/bundle.js"></script><script src="/static/js/vendors~main.chunk.js"></script><script src="/static/js/main.chunk.js"></script></body>
</html>

The API is working because the response contains the <title>MY APP Title Name String</title> string. It must have successfully visited the frontend service running on my EC2 instance.

QUESTION: Why would I get HTML code template, but not able to see the webpage UI like I was able to see with the NLB's domain link (like in step 1 and step 2) ?

Why is the browser showing HTML code with the invoke url, instead of loading the actual web page UI with the NLB's public url and EC2 instance's public ip address?

CodePudding user response：

You need to set an appropriate Content-Type header on your response from the API Gateway. The default value if the header definition is missing is application/json, so your browser will display your HTML as text and not render it correctly.

Add a header Content-Type: text/html to your route that serves your React application and the browser will display it correctly.