When attempting to send a POST request to the Slack API using raw JSON, I encountered the following error:
Access to XMLHttpRequest at '' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.
Here is the code snippet:
const params = {
"attachments":[
{
"fallback":"New Project Lead:<" + this.our_website + "|Click here to view>",
"pretext":"New Project Lead:<" + this.our_website + "|Click here to view>",
"color":"#D00000",
"fields":[
{
"title":"Company",
"value":this.user_company,
"short":false
},
{
"title":"Country",
"value":getName(this.user_country),
"short":false
}
]
}
]
};
this.axios.post('https://hooks.slack.com/services/continuation/of/url', params, {
headers: {
'content-type': 'application/json',
'Access-Control-Allow-Origin' : '*',
},
}).then((response)=>{
loader.hide();
let msg = "Sent Successfully";
this.displayAlert("Done", msg, "success");
setTimeout(() => { // redirect to home after 2s
document.location = '/';
}, 2000);
}).catch((error) =>{
alert(error);
});
}).catch((error) => {
loader.hide();
let msg = "Error : " + error;
this.displayAlert("Error", msg, "error");
});
I am utilizing VueJS alongside the Axios HTTP library for this operation. Interestingly, when testing with POSTMAN, everything functions as expected.