How to send a POST request using an html button

Question

I want to send a POST request to the URL, for example, I want to create a database in influxdb by pressing this button. So far I tried this but cannot make it work

 <button id="post-btn">Post</button>

<script> 
const button = document.getElementById('post-btn');
button.addEventListener('click', async _ => {
  try {
    const response = await fetch('http://00.00.000.000:2000/query', {
      method: 'post',
      body: {
       "q=create database telecom"
      }
    });
    console.log('Completed!', response);
  } catch(err) {
    console.error(Error: ${err});
  }
});
</script>

The error it gives me is "Failed to fetch"

Answer 1

You have to deal with Cross-Origin Resource Sharing, so you need to allow your Grafana origin on the InfluxDB server side.

Anyway it looks very unsafe. If you can call create database telecom, then also other Grafana user can requests own queries, e.g. drop database telecom. Grafana should have read only access and InfluxDB should be managed outside of Grafana.