How to allow Request header field access-control-allow-origin on VueJS

Question

I trying to make a POST request to Slack API using raw JSON but I keep getting the error below

Access to XMLHttpRequest at 'https://hooks.slack.com/services/conuation/of/the/url' 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.

Below is code

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 using VueJS and Axios HTTP library for the call. Whenever I test with POSTMAN, it works fine.

The client shouldn't send a Access-Control-Allow-Origin header to the server it isn't going to be used. These headers are sent from the server to tell the browser if it is allowed to access the resources at that endpoint. If you are having CORS issues have a look at the many CORS Q&As on SO — Patrick Evans
– Patrick Evans, Commented Nov 20, 2019 at 18:06

Oleksandr Paiziak · Accepted Answer · 2019-11-20 18:12:54Z

1

You can't send this request from frontend to this service. A lot of services block it.

You can create your backend sub service and send request to slack api. So in result you have your own service with url mydomain.com/services/continuation/of/url, when you call it, your service will make call to https://hooks.slack.com/services/continuation/of/url and return slack response

edited Nov 20, 2019 at 18:12

answered Nov 20, 2019 at 18:07

Oleksandr Paiziak

3822 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ilo Calistus Over a year ago

Okay, I wiil try that out

Collectives™ on Stack Overflow

How to allow Request header field access-control-allow-origin on VueJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related