How to protect api keys in wordpress?

Question

API

Good afternoon.
There is a filter page on a wordpress site.



I use vue js to work with the filter.
I receive the data through fetch.

But how to protect authorization keys?

fetch('https://api_url', {
          method: 'GET',
          credentials: 'same-origin',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'authkey': xxxx',
            'appkey': 'xxx'

          },
          body: params
        })
          .then((resp) => resp.json())
          .then((resp) => {
            this.agentCities = resp.data.agenzie_list;
          });

Thanks in advance for the hint.

Answer 1

You are clearly written in the manual. These keys can only be used for the server. The second option is they are valid for js and then the api owner must provide cors with binding to your domain. If these are still server keys, then create a php file on your server that accepts requests only from your host and accesses the api