Sending email using axios and sendgrid API result in CORS error

Question

I am trying to send a post request to SendGrid so that it will direct it to the email address specified in the request body. I have made a verified email account for sendgrid and the api key is stored as an environment variable.

I have the POST method in axiosClient.js, here's the code

import axios from "axios";

export async function sendMail() {
    let data = {
        personalizations: [
            {
              to: [
                {
                  email: "myemail@mail.com",
                  name: "John",
                },
              ]
            }
          ],
          from: {
            email: "myemail@mail.com",
            name: "Doe",
          },
          subject: "Sending with SendGrid is Fun",
          content: [{
            type: "text/html",
            value:
              `<p>
                Hello, -name-!<br />
                and easy to do anywhere, even with Node.js
              </p>`,
          }]
    }

    await axios({
        method: "POST",
        url: "https://api.sendgrid.com/v3/mail/send",
        headers: {'Authorization': `Bearer process.env.SENDGRID_API_KEY`},
        body: data
  })
  .then((response) => {
    console.log(response);
  })
};

And I call the function on the front-end side

<script>
import { sendMail } from "../axiosClient.js";

export default {
  data() {
    return {
      name: "",
      email: "",
      subject: "",
      message: "",
    };
  },
  methods: {
    async sendEmail() {
      console.log(this.email);
      console.log(this.subject);
      console.log(this.message);

      await sendMail();
    },
  },
};
</script>

But I keep getting this error, how to fix? Thanks in advance.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.sendgrid.com/v3/mail/send. (Reason: CORS header 'Access-Control-Allow-Origin' does not match 'https://sendgrid.api-docs.io').