By using AWS re:Post, you agree to the AWS re:Post Terms of Use
AWS re:Postre:Post

Not able to get complete response of a web page when using api gateway

0

Hi All,

I have created API Gateway with mtls enabled and with integration type as vpc link to NLB.

The resources and methods are as below,

/
 ANY
 GET
 OPTIONS
  /{proxy+} 
  ANY
  OPTIONS

In URL Path Parameters , URL Query String Parameters , HTTP Headers are empty.

In Method Execution, Authorization, Request Validator are set to None, API Key Required is false.

In Method Response, HTTP Status is Proxy, HTTP Status is 200, Response Headers for 200 is Access-Control-Allow-Origin. Response Body for 200 is No models.

wildcard custom domain name is created and cert is imported.

NLB is listening on TCP 443 port and forwarding traffic to EC2 on a particular port where reverse proxy is running and forwarding traffic to backend servers based on host headers.

The flow is like, After entering website url in browser (https://xxx.xx.abc.io), it is going to API Gateway (as CNAME record is created with API Gateway's domain name), In API Gateway, mentioned same website url (https://xxx.xx.abc.io) in Endpoint URL (to later match the host header in reverse proxy so that it will forward the traffic to the server where application is running) as anyway traffic goes to NLB (irrespective of what we mention in Endpoint URL) which should forward traffic to reverse proxy.

Below are the API Gateway logs

(3cad-6a6c-2ff1-4dda-12345) Starting execution for request: 3ba352b-....
(3cad-6a6c-2ff1-4dda-12345) HTTP Method: GET, Resource Path: /
(3cad-6a6c-2ff1-4dda-12345) Method request path:  {}
(3cad-6a6c-2ff1-4dda-12345) Method request query string: {}

(3cad-6a6c-2ff1-4dda-12345) Method request headers: {sec-fetch-mode=navigate, sec-fetch-site=none, accept-language=en-GB,en;q=0.9, User-Agent=Mozilla/5.0 (X 10_15_7) WebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.64 S/537.36, Host=https://xxx.xx.abc.io, sec-fetch-user=?1, accept=text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9, sec-ch-ua=" Not A;Brand";v="99", "Chromium";v="101", "Google Chrome";v="101", sec-ch-ua-mobile=?0, sec-ch-ua-platform="S", upgrade-insecure-requests=1, X-Forwarded-For=<my_ip>, accept-encoding=gzip, deflate, br, sec-fetch-dest=document}

(3cad-6a6c-2ff1-4dda-12345) Method request body before transformations: 

(3cad-6a6c-2ff1-4dda-12345) Endpoint request URI: https://xxx.xx.abc.io

(3cad-6a6c-2ff1-4dda-12345) Endpoint request headers: {sec-fetch-mode=navigate, sec-fetch-site=none, x-amzn-apigateway-api-id=2c2zsc3, accept-language=en-GB,en;q=0.9, User-Agent=Mozilla/5.0 (X 10_15_7) WebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.64 S/537.36, Host=https://xxx.xx.abc.io, sec-fetch-user=?1, accept=text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9, sec-ch-ua=" Not A;Brand";v="99", "Chromium";v="101", "Google Chrome";v="101", sec-ch-ua-mobile=?0, sec-ch-ua-platform="macOS", upgrade-insecure-requests=1, X-Forwarded-For=<my_ip>, accept-encoding=gzip, deflate, br, sec-fetch-dest=document}

(3cad-6a6c-2ff1-4dda-12345) Endpoint request body after transformations: 

(3cad-6a6c-2ff1-4dda-12345) Sending request to https://xxx.xx.abc.io

(3cad-6a6c-2ff1-4dda-12345) Received response. Status: 200, Integration latency: 46 ms

(3cad-6a6c-2ff1-4dda-12345) Endpoint response headers: {access-control-allow-methods=GET,PUT,POST,DELETE, access-control-allow-headers=x-http-method-override,x-requested-with,content-type,accept, Content-Type=text/html; charset=utf-8, Content-Length=303389, ETag=W/"41d-TlJhUL/tuywaSgaxKgTtn8", Date=Wed, 01 Dec 2021 13:15:15 GMT, X-Content-Type-Options=nosniff, Strict-Transport-Security=max-age=300;includeSubDomains;preload;always;, X-Frame-Options=deny}

(3cad-6a6c-2ff1-4dda-12345) Endpoint response body before transformations: <!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta http-equiv="Content-Security-Policy" content="unsafe-inline"/><style>
@keyframes spin{
    0%{transform:rotate(0)}
    100%{transform:rotate(360deg)}
}
#___gatsby>div:empty{
    position:fixed;

(3cad-6a6c-2ff1-4dda-12345) Method response body after transformations: <!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta http-equiv="Content-Security-Policy" content="unsafe-inline"/><style>
@keyframes spin{
    0%{transform:rotate(0)}
    100%{transform:rotate(360deg)}
}
#___gatsby>div:empty{
    
(3cad-6a6c-2ff1-4dda-12345) Method response headers: {access-control-allow-methods=GET,PUT,POST,DELETE, access-control-allow-headers=x-http-method-override,x-requested-with,content-type,accept, Content-Type=text/html; charset=utf-8, Content-Length=303389, ETag=W/"41d-TlJhUL/tuywaSgaxKgTtn8", Date=Wed, 01 Dec 2021 13:15:15 GMT, X-Content-Type-Options=nosniff, Strict-Transport-Security=max-age=300;includeSubDomains;preload;always;, X-Frame-Options=deny}

(3cad-6a6c-2ff1-4dda-12345) Successfully completed execution
(3cad-6a6c-2ff1-4dda-12345) Method completed with status: 200

The issue is website is just trying to load but its totally blank (no images nothing on page)

On dev-tools, console tab, it shows below,

Refused to execute script from '<URL>' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

https://xxx.xx.abc.io/:1 Refused to execute script from 'https://xxx.xx.abc.io/component---src-pages-index-js-c14b2e4d69274.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Refused to execute script from 'https://xxx.xx.abc.io/3-c31d8ae5a9706.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

If I directly hit NLB DNS:app_port, the page loads properly.

Can anyone suggest where is the problem?

Thanks,

Topics
ServerlessFront-End Web & MobileNetworking & Content Delivery
Tags
Amazon API GatewayNetwork Load Balancer
Language
English
AWS-User-5331128
asked 2 years ago617 views
2 Answers
0

From the question it is not very clear, therefore I am asking this - Are you trying to use API Gateway for load balancing of static HTML content?

If so, you are better off using an Application Load Balancer, if your website content is being hosted on EC2 machines. You can also consider hosting using S3 bucket static website (https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteHosting.html) or use AWS Amplify (https://aws.amazon.com/amplify/)

API Gateway has been designed primarily for RESTful APIs and Websockets APIs.

If my understanding is wrong and you are using it to invoke RESTful APIs or Websocket APIs, then can you please provide an architecture diagram and some more details on where in the flow the error is happening.

profile pictureAWS
EXPERT
Indranil Banerjee AWS
answered 2 years ago
  • AWS-User-5331128
    2 years ago

    Yes. We have already enabled CORS.

  • AWS-User-5331128
    2 years ago

    Hi,

    Do we need to add this header or change some option for content-type i.e content-type: text/javascript? Currently the error we see in console (i.e Refused to execute script from 'https://xxx.xx.abc.io/3-c31d8ae5a9706.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.)

    If yes, where we need to set this in API-Gateway?

  • Indranil Banerjee AWS EXPERT
    2 years ago

    Is your backend returning content-type as text/javascript? If you look at the last answer in https://stackoverflow.com/questions/38979467/using-aws-lambda-and-api-gateway-to-serve-static-javascript, this person seems to have made it work using a lambda function. Can you try the same steps and see if it works?

  • AWS-User-5331128
    2 years ago

    Hi @Indranil Banerjee AWS, We are using proxy integration and i think therefore we cannot use lambda for this

  • Indranil Banerjee AWS EXPERT
    2 years ago

    Is your backend setting the Content-Type header as text/javascript or application/javascript? I was under the impression it is setting it as text/html. If not, I apologize.

    If it is currently returning text/html, can you modify the backend to return text/javascript or application/javascript?

    text/javascript is apparently obsolete although it may still work with most browsers, but application/javascript is the recommended header - https://www.edureka.co/community/74681/what-appropriate-content-type-header-for-javascript-files

0

Hi @Indranil Banerjee AWS,

Thanks for your response.

Are you trying to use API Gateway for load balancing of static HTML content?

To give a background, We have our website running on EC2 instance. The main purpose of using API Gateway is to enable MTLS. We need clients visiting our site to provide valid certificate before using it. It's a website where users login and create their individual application for testing purpose and each users only sees their created apps upon login. The other content it shows to all users (like documentation, different inputs it asks to test their apps are all same for all). The frontend of it is written in React.

If my understanding is wrong and you are using it to invoke RESTful APIs

Yes we are using it to invoke RESTful APIs.

We have created API Gateway and through vpc link we have attached it with NLB (as, till now we can't directly attach ALB to API Gateway). NLB is listing on TCP port 443 and sending traffic to a reverse proxy where traffic is send to backend servers based on host header.

The flow is like, After entering website url in browser (https://xxx.xx.abc.io), it is going to API Gateway (as CNAME record is created with API Gateway's domain name), In API Gateway, we have mentioned same website url (https://xxx.xx.abc.io) in Endpoint URL (to later match the host header in reverse proxy so that it will forward the traffic to the server where application is running) as anyway traffic goes to NLB (irrespective of what we mention in Endpoint URL) which should forward traffic to reverse proxy. Upon receiving traffic on reverse proxy, it should forward traffic to application server on specific port.

Now when we hit the url, we see the website is not loading all the content (like .css, .js), it is just a blank page. All the calls in dev-tools have successful state code but nothing is getting displayed on webpage.

If we hit NLB_DNS:App_port (created a application port listener who forwards traffic directly to App server) we see website is loading properly.

Below are the current logs on cloudwatch

(2c4a14-690d-4d57-b2f5-61fc6e12f) Extended Request Id: TEw4sGYF8GQ=
(2c4a14-690d-4d57-b2f5-61fc6e12f) Verifying Usage Plan for request: 2c4a14-690d-4d57-b2f5-61fc6e12f. API Key:  API Stage: 1d1ks7b3/devstage
(2c4a14-690d-4d57-b2f5-61fc6e12f) API Key  authorized because method 'ANY /{proxy+}' does not require API Key. Request will not contribute to throttle or quota limits
(2c4a14-690d-4d57-b2f5-61fc6e12f) Usage Plan check succeeded for API Key  and API Stage 1d1ks7b3/devstage
(2c4a14-690d-4d57-b2f5-61fc6e12f) Starting execution for request: 2c4a14-690d-4d57-b2f5-61fc6e12f
(2c4a14-690d-4d57-b2f5-61fc6e12f) HTTP Method: GET, Resource Path: /icons/icon-48x48.png
(2c4a14-690d-4d57-b2f5-61fc6e12f) Method request path: {proxy=icons/icon-48x48.png}
(2c4a14-690d-4d57-b2f5-61fc6e12f) Method request query string: {v=7956ec2f2c9f419ec004c1c20692dd56}

(2c4a14-690d-4d57-b2f5-61fc6e12f) Method request headers: {sec-fetch-mode=no-cors, referer=https://xxx.xx.abc.io/, sec-fetch-site=same-origin, accept-language=en-GB,en;q=0.9, User-Agent=Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.64 Safari/537.36, Host=xxx.xx.abc.io, accept=image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8, sec-ch-ua=" Not A;Brand";v="99", "Chromium";v="101", "Google Chrome";v="101", sec-ch-ua-mobile=?0, sec-ch-ua-platform="macOS", X-Forwarded-For=18.18.59.141, accept-encoding=gzip, deflate, br, sec-fetch-dest=image}

(2c4a14-690d-4d57-b2f5-61fc6e12f) Method request body before transformations: [Binary Data]

(2c4a14-690d-4d57-b2f5-61fc6e12f) Endpoint request URI: https://xxx.xx.abc.io?v=7956ec2f2c9f419ec004c1c20692dd56
(2c4a14-690d-4d57-b2f5-61fc6e12f) Endpoint request headers: {sec-fetch-mode=no-cors, referer=https://xxx.xx.abc.io/, sec-fetch-site=same-origin, x-amzn-apigateway-api-id=1d1k9b3, accept-language=en-GB,en;q=0.9, User-Agent=Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.64 Safari/537.36, Host=xxx.xx.abc.io, accept=image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8, sec-ch-ua=" Not A;Brand";v="99", "Chromium";v="101", "Google Chrome";v="101", sec-ch-ua-mobile=?0, sec-ch-ua-platform="macOS", X-Forwarded-For=18.18.59.141, accept-encoding=gzip, deflate, br, sec-fetch-dest=image}

(2c4a14-690d-4d57-b2f5-61fc6e12f) Endpoint request body after transformations: [Binary Data]

(2c4a14-690d-4d57-b2f5-61fc6e12f) Sending request to https://xxx.xx.abc.io?v=7956ec2f2c9f419ec004c1c20692dd56

(2c4a14-690d-4d57-b2f5-61fc6e12f) Received response. Status: 200, Integration latency: 54 ms

(2c4a14-690d-4d57-b2f5-61fc6e12f) Endpoint response headers: {access-control-allow-methods=GET,PUT,POST,DELETE, access-control-allow-headers=x-http-method-override,x-requested-with,content-type,accept, Content-Type=text/html; charset=utf-8, Content-Length=302735, ETag=W/"49e8f-o2TLqj90hCTLB7ZuBUDK7iheJ08", Date=Thu, 02 Jun 2022 03:25:17 GMT, X-Content-Type-Options=nosniff, Strict-Transport-Security=max-age=300;includeSubDomains;preload;always;, X-Frame-Options=deny}

(2c4a14-690d-4d57-b2f5-61fc6e12f) Endpoint response body before transformations: [Binary Data]

(2c4a14-690d-4d57-b2f5-61fc6e12f) Method response body after transformations: <!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><style>
@keyframes spin{
	0%{transform:rotate(0)}
	100%{transform:rotate(360deg)}
}
#___gatsby>div:empty{
	position:fixed;
	top:50%;
	left:50%;
	margin-top:-30px;
	margin-left:-30px;
	border:2px solid var(--primary-color);
	border-bottom:2px solid #F3F3F3;
	border-radius:50%!important;
	width:60px;
	height:60px;
	animation:spin 1.2s linear infinite
}</style><style data-href="/styles.2665b4746e0e64a34405.css">/*!
 *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */@font-face{font-family:FontAwesome;src:url(/static/fontawesome-webfont-674f50d287a8c48dc19ba404d20fe713.eot);src:url(/static/fontawesome-webfont-674f50d287a8c48dc19ba404d20fe713.eot?#iefix&v=4.7.0) format("embedd [TRUNCATED]
 
(2c4a14-690d-4d57-b2f5-61fc6e12f) Method response headers: {access-control-allow-methods=GET,PUT,POST,DELETE, access-control-allow-headers=x-http-method-override,x-requested-with,content-type,accept, Content-Type=text/html; charset=utf-8, Content-Length=302735, ETag=W/"49e8f-o2TLqj90hCTLu7iheJ08", Date=Thu, 02 Jun 2022 03:25:17 GMT, X-Content-Type-Options=nosniff, Strict-Transport-Security=max-age=300;includeSubDomains;preload;always;, X-Frame-Options=deny}

(2c4a14-690d-4d57-b2f5-61fc6e12f) Successfully completed execution
(2c4a14-690d-4d57-b2f5-61fc6e12f) Method completed with status: 200

On console tab, we see below,

Refused to execute script from '<URL>' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

xxx.xx.abc.io/:1 Refused to execute script from 'https://xxx.xx.abc.io/4-d53d8ae965b8bdca9606.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Do we need to set anything in API Gateway which we are missing to get all the response from se

Please let us know if you need more information.

Can we attached images to this site? Not able to find option to upload images here. Can someone please clarify?

Thanks,

AWS-User-5331128
answered 2 years ago
  • Indranil Banerjee AWS EXPERT
    2 years ago

    OK. Thanks for the clarification. I am unfortunately not a front-end person, but googling the error, I see lot of people have faced similar errors. So maybe you can get some pointers.

    Did you enable CORS on the resources when you configured API Gateway?

  • Indranil Banerjee AWS EXPERT
    2 years ago

    When you look at the method in API Gateway, you see 4 boxes - Method Request, Integration Request, Integration Response, Method Response. In the Method Response box, you should be able to modify Response Headers for 200. Can you please try setting the content-type header and see if it works

  • AWS-User-5331128
    2 years ago

    Hi @Indranil Banerjee AWS,

    Tried setting content-type: text/javascript in the root resource of ANY method in Method Response for Response Headers for 200 but getting below error.

    Invalid patch path /responseParameters/method.response.header.content-type: text/javascript

  • Indranil Banerjee AWS EXPERT
    2 years ago

    No I am not suggesting that you change your backend to Lambda. I understand you are using an EC2 based site that is returning some Javascript content to API Gateway. Can you modify the backend to return text/javascript instead of text/html and then modify the API Gateway configuration as suggested in the Stackoverflow post?

  • AWS-User-5331128
    2 years ago

    didn't get you. Our backend is returning javascript so didnt get you when you said Can you modify the backend to return text/javascript instead of text/html and then modify .....

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions

Relevant content