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?
AWS公式更新しました 10ヶ月前
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