CODEWITHSUNDEEP
amazon-web-servicesbrowserfetchamazon-cloudfrontweb-application-firewall
SuperVeetz
SuperVeetz

Reputation: 2136

AWS WAF: Custom Responses are not accessible by browser

I've configured some rules with custom responses in AWS WAF to prevent some users from accessing my website based on their geographical location. I can see that these rules are working as intended because I am able to see the custom response status (406) and response header (custom-header) in the network tab, but I am struggling to find a way for my web client to access any of these values within JS code (using fetch or axios). While using the fetch API, I receive the following error without any response value: TypeError: Failed to fetch.

I've tried using some of the recommended approaches like utilizing a 302 status code + Location header, but these only work for navigation based GET requests, not ajax ones.

Is there any way to do this other than using some proxy web server between the client and cloudfront?

          fetch(URL, {
            headers: {
              Accept: "application/json, text/plain, */*",
              ...
            },
            // mode: "no-cors", // Results in opaque response
          })
            .then((res) => {
              console.log("$$$ - res: ", res);
            })
            .catch((err) => {
              console.log("$$$ - err: ", err); // TypeError: Failed to fetch
            });

Browser Network Tab

Upvotes: 0

Views: 85

Answers (1)

Bako
Bako

Reputation: 19

Here are some tips that can help you fix this:

  • Check AWS WAF request logs (you need to enable this)
  • I cannot see from the image what content-type you are sending, that can be a problem also, default is "application/x-www-form-urlencoded", but that maybe is blocked by WAF
  • Last one method rules should be checked or some overwriting rule.

I think it will be more helpful if you can share more of WAF configuration.

Upvotes: 0

Related Questions