API Gateway Returning 403 Forbidden with CORS policy blocked error

0

My application makes API calls to our API gateway using the aws-amplify library in our React application. We have a POST route which takes a json of a couple different fields and saves it to our database using Lambdas, but one of the fields in the json is a string of html content and it is causing issues to arise on very specific POST requests. This POST route works for many different strings using the same API call, to the same API gateway, using the same lambdas, however anytime that the string contains reference to styles, the API responds with a 403 forbidden error with the following Error message:

Access to XMLHttpRequest at (removed) from origin (removed) has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have searched around to try to resolve this issue, but the main suggestions are to enable CORS (which has been done), and return the Access-Control-Allow-Origin portion of the header in the lambda function, which is already included since we return all of the request parameters in the lambda function.

To provide an example, using the same API call where the body looks like: { "id": "12345", "type": "info", "content": [ { "type": "text", "text": "<p> Text </p>", "action": "add" } ], "title": "Title" } Succeeds with a 200 response, and successfully writes the data to the database.

Changing only the content -> text field to this { "id": "12345", "type": "info", "content": [ { "type": "text", "text": "<p style=""> Text </p>", "action": "add" } ], "title": "Title" }

or { "id": "12345", "type": "info", "content": [ { "type": "text", "text": "<p style="color: rgb(230, 0, 0);">red text</p>", "action": "add" } ], "title": "Title" } Would give 403 forbidden errors with the CORS error I provided above. The only thing I can ever find to be different on the calls that fails is a style portion of the content.

Also of note, all of the preflight responses return 200 successful.

We have redeployed the lambdas, redeployed the API Gateway, rebuild the API gateway route to ensure that CORS is enabled, and none of these have resolved the issue. What do I need to change in order to allow for my POST route to stop giving a forbidden error for these very specific instances, when the majority of the time it succeeds without issue?

2回答
0
承認された回答

Adding this answer to mark as most helpful: As suggested in a comment to another answer, the WAF had protections that was blocking the request.

回答済み 7ヶ月前
0

Changing only the content -> text field to this { "id": "12345", "type": "info", "content": [ { "type": "text", "text": "<p style=""> Text </p>", "action": "add" } ], "title": "Title" } or { "id": "12345", "type": "info", "content": [ { "type": "text", "text": "<p style="color: rgb(230, 0, 0);">red text</p>", "action": "add" } ], "title": "Title" }

Are those inputs well-formatted JSON? Look like you need to replace the double quotes in <p> element to the single quotes, as below.

{ "id": "12345", "type": "info", "content": [ { "type": "text", "text": "<p style=''> Text </p>", "action": "add" } ], "title": "Title" }
{ "id": "12345", "type": "info", "content": [ { "type": "text", "text": "<p style='color: rgb(230, 0, 0);'>red text</p>", "action": "add" } ], "title": "Title" }
profile picture
HS
回答済み 8ヶ月前
  • I should have mentioned that I had already tried changing to single quotes, but using "<p style=''> Text </p>" and "<p style='color: rgb(230, 0, 0);'>red text</p>" also error

  • Does your API Gateway return an 200 response with "Access-Control-Allow-Origin" header if you test the method with the problematic inputs on the AWS Console? https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-test-method.html

  • Yes, using the AWS console with the problematic inputs succeeds with a 200 response, and returns the headers including Access-Control-Allow-Origin.

  • Hmm. Does your API Gateway have some protections (e.g., WAF)? The only possibility otherwise I can imagine is that some protections blocked your request and returned an error response without the CORS headers, so that the error message No 'Access-Control-Allow-Origin' header is present on the requested resource. arised.

  • The WAF was the issue. Thank you for this suggestion

ログインしていません。 ログイン 回答を投稿する。

優れた回答とは、質問に明確に答え、建設的なフィードバックを提供し、質問者の専門分野におけるスキルの向上を促すものです。

質問に答えるためのガイドライン

関連するコンテンツ