Reactjs - Axios - Nexmo POST request not working (No 'Access-Control-Allow-Origin' )

Question

I'm using Reactjs and I'm trying to do a POST request with Axios to send a SMS with Nexmo. I can receive the SMS but I have this error on the console No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. Here's my code :

axios({
  method : 'post',
  url : 'https://rest.nexmo.com/sms/json',
  params:{
    api_key:'xxxxxxxxx',
    api_secret:'xxxxxxxxx',
    to:phoneNumber,
    from:'NEXMO',
    text:"New message"
  },
  headers:{
      'Content-Type': 'application/x-www-form-urlencoded'
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

How can I fix this issue ? Thx

Answer 1

The Nexmo SMS API should only be interacted with from a trusted and secure client. With the API key and secret credentials you have significant access to your Nexmo account so you should not expose those credentials to "users" of an application. That normally means you should only use the key and secret credentials with the API from a server.

The Nexmo Voice API does offer JWT auth support that would be better suited to client-side API interactions since you can create very short-lived tokens and control what resources and functionality the token allows. But the SMS API only offers key and secret auth.