Can't send an Incoming Slack hook message through Angular1s $http

Here's my http request

$http({
  method: 'post',
  dataType: 'json',
  data: {
    'username': 'HiBye',
    'icon_emoji': ':ghost:',
    'channel': '#hcbcrepowatch',
    'text': 'hello world!'
  },
  url: 'https://hooks.slack.com/services/xxxx/xxxx',
  header: {'Content-Type': 'application/json'}
}).then(function(result){ 
  console.log('success');
  console.log(result);
}, function(error){
  console.log(error);
});

I'm getting the following error:

XMLHttpRequest cannot load ... Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

Where the returned error object has data:null, status: -1, statusText: "",

When I change data: to body: i get a response object with data: "invalid_payload", status: 500, statusText: "Server Error"

Not Sure where to go from here and all my googling hasn't really helped.

Solution

I know nothing, and I'm only posting here because I was in the same boat and ran across a fix for exactly what you issue is, I believe.

After lots of searching I ended up wrapping my JSON data in JSON.stringify()

For example, my data: looks like this:

data: JSON.stringify({"text": "Dude"})

Everything else you have looks the same as mine, respectively.

Maybe that will help you out? Hope so. Good luck.