- 최신
- 최다 투표
- 가장 많은 댓글
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.
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,
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?
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
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
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?
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 .....
관련 콘텐츠
- AWS 공식업데이트됨 일 년 전
- AWS 공식업데이트됨 2년 전
Yes. We have already enabled CORS.
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.eRefused 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?
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?
Hi @Indranil Banerjee AWS, We are using proxy integration and i think therefore we cannot use lambda for this
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