Skip to content
Drew Baker edited this page May 24, 2023 · 3 revisions

You can use the built in Proxy endpoint to send a request from the frontend, via WordPress and have it add in secure Authorization headers. This will keep any private API keys secret, but with a friendly DX.

Setup WordPress

  1. Be sure to add the Proxy Settings ACF fields found in acf/proxy-settings.json
  2. Under the Proxy Settings options page, add in the API providers you want to proxy.
    1. The name is used in the frontend util function, so remember that as they need to match.

Frontend functions

There is a function in util/proxyFetch.js that you can import and use. It works similar to the regular JS fetch() function, except it adds some custom Headers that connect with the WordPress proxy to add in your private Auth keys.

For example:

    methods: {
        async submit() {
            try {
                const responseBody = await proxyFetch(
                    "mailer", // The "name" in the ACF Proxy Settings
                    "/v2/contacts", // The API endpoint you wish to access
                    // An object of fetch params, same as regular JS fetch() params
                    {
                        method: "POST",
                        body: {
                            email: "[email protected]",
                            firstname: "Jane",
                            lastname: "Doe"
                        }
                    }
                )
            } catch (error) {
                // Do something on error...
            }
        }
    }

Notes

By default, the function builds out the backend URL based on your GQL_ENDPOINT ENV, but you can manually override that using a PROXY_BASE_URL if you need.

Clone this wiki locally