Accessing Workers KV with axios from Vue.js app

Am trying to access workers KV with axios request from within vue.js app.

` let url = “https://api.cloudflare.com/client/v4/accounts/<…>/storage/kv/namespaces/<…>/bulk”
let content = “[{‘key’:‘ve1’, ‘value’:‘ve2’}, {‘key’:‘ve3’, ‘value’:‘ve4’}]”
const config = { headers: {‘X-Auth-Key’: ‘<…>’, ‘X-Auth-Email’:’<…>’} };

      axios.put(url, content, config).then(response => {
        console.log('response received')
      });`

The error is rerported to console:

Access to XMLHttpRequest at 'https://api.cloudflare.com/client/v4/accounts/<...>/storage/kv/namespaces/<...>/bulk' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Same error is generated by native axios call and by https://github.com/nickbalestra/storage-kv call. If I put same code in js file and launch it by node app.js - response is returned successfully.

How do I call CF KV api from local vue.js app?

Thanks!

Same as No 'Access-Control-Allow-Origin' header is present on the requested resource

You’ll need to proxy the request to CF’s api somehow (your backend, a CF workers backend using fetch, etc). Cloudflare does not specify cors for security reasons.

1 Like

Thanks! :slight_smile:

Vue.app direct access to Cloudflare API should be avoided at all cost. Even in the most controlled environment always use a worker to interact with the Cloudflare API, or Worker API.

3 Likes