Skip to content

Replace_response not replacing XHR content from a proxied React App? #37

@shrike71

Description

@shrike71

Not sure if i'm doing this right, or if it's at all possible.

We have an application that audits customer content via an API and tags/decorates in-line words and phrases if they break certain rules. This is done via a Go application filter that works from a Kong (and AWS Serverless APIGateway , Traefik) gateway.

We are trying to do the same thing with a proxied React application, and we thought that Caddy would be a much better fit for this as using an API gateway as an HTTP proxy would be a bit of an overkill.

The following configuration works perfectly for any proxied app that's delivering HTML responses. In fact, I can replace any of the content in the main index.html landing that hosts the React app, but I cannot seem to replace any content of the XHR calls that the React client makes makes back to the server (mainly graphql results and html components). Is the react client exempt from this process or forming some sort of "tunnel"? As far as we've been able to debug, websockets are not involved.

{
"admin":{"listen":"0.0.0.0:2019"},
"apps": {
  "http": {
    "servers": {
      "sandbox.local": {
        "listen": ["caddy-caddy-1:80"],
        "routes": [{
                      "handle": [
                        {
                          "handler": "replace_response",
                          "stream": true,
                          "replacements": [
                            {
                              "search": "Contacts",
                              "replace": "Contacts [XYZ]"
                            }
                          ]
                        },
                        {
                          "handler": "reverse_proxy",
                          "upstreams": [
                            {
                              "dial": "semaf:3000"
                            }
                          ]
                        }
                      ]
                  }]
      }
    }
  }
}
}

The above snippet works well for any content in the proxied application, running on a container (semaf:3000) as long as the response is an html page and not a React app. The replacement does not work for any XHR calls the react client makes to the server. The proxied application is not being prevented from working by any other effects, such as CORS, in fact, the caddy configuration is otherwise smooth and works well.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions