AWS API 网关：为啥调用 url 返回 HTML 代码而不是实际网页？
Posted
技术标签:
【中文标题】AWS API 网关：为啥调用 url 返回 HTML 代码而不是实际网页？【英文标题】：AWS API gateway: why is the invoke url returning HTML code instead of actual web page?AWS API 网关：为什么调用 url 返回 HTML 代码而不是实际网页？ 【发布时间】：2022-01-19 13:02:49 【问题描述】：我正在 AWS 中构建我的应用程序。
我已在 EC2 实例中部署了我的 Reactjs 前端项目。我不想让外部互联网世界的用户直接访问我的 EC2 实例，而是将它放在 AWS API 网关后面。因此，AWS API Gateway 将成为我的应用程序前端和后端服务的单一入口点。
在对如何连接 API 网关和 EC2 实例进行了一些研究后，我认为这是计划：
外部世界 ---> AWS API 网关 ---> VPC 链接 ---> 网络负载均衡器 ---> 我的 VPC 目标组/EC2 实例
这是我所做的：
Reactjs 前端项目在 EC2 实例中运行良好；我可以使用 EC2 实例的公网 IP 地址访问网页。
配置良好的目标组和网络负载均衡器。我通过在浏览器中输入 NLB 的 DNS 名称确认，即http://myapp-frontend-NLB-c11112esd43524rw.elb.ap-northeast-1.amazonaws.com，它成功加载/打开了我的应用程序的前端网页。
我已经按照这个aws doc：https://docs.aws.amazon.com/apigateway/latest/developerguide/getting-started-with-private-integration.html一步步配置了VPC链接、API资源、集成类型等。
我只创建了一个 API：ANY / ，它接受基本路径上的任何方法，并且应该将 HTTP 请求传递给网络负载均衡器，然后传递给 EC2 实例。
部署创建的 API 后，点击打开 Invoke URL，（https://123qwe123qe.execute-api.ap-northeast-1.amazonaws.com/[stage] 的形式），我可以看到以下 HTML 代码：
<!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>
API 正在工作，因为响应包含<title>MY APP Title Name String</title> 字符串。它一定已经成功访问了我的 EC2 实例上运行的前端服务。
问题： 为什么我会得到 HTML 代码模板，但不能像我在 NLB 的域链接中看到的那样看到网页 UI（如在步骤 1 和步骤 2 中）？
为什么浏览器显示带有调用 url 的 HTML 代码，而不是加载带有 NLB 的公共 url 和 EC2 实例的公共 IP 地址的实际网页 UI？
【问题讨论】：
访问 API Gateway URL 时可以分享响应头吗？ 【参考方案1】：您需要在来自 API 网关的响应中设置适当的 Content-Type 标头。如果缺少标头定义，则默认值为application/json，因此您的浏览器会将您的 HTML 显示为文本并且无法正确呈现。
将标题Content-Type: text/html 添加到为您的 React 应用程序提供服务的路由中，浏览器将正确显示它。
【讨论】：
以上是关于AWS API 网关：为啥调用 url 返回 HTML 代码而不是实际网页？的主要内容，如果未能解决你的问题，请参考以下文章
在 Alexa 技能中播放由 AWS api 网关创建的 mp3