如何在 VueJS 上允许请求 header 字段 access-control-allow-origin

Question

我尝试使用原始 JSON 向 Slack API 发出 POST 请求，但我一直收到以下错误

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.

下面是代码

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");
                });

我正在使用 VueJS 和 Axios HTTP 库进行调用。每当我用 POSTMAN 测试时，它都能正常工作。

Answer 1

您不能将此请求从前端发送到此服务。许多服务阻止它。

您可以创建后端子服务并将请求发送到 slack api。因此，结果是您使用 url mydomain.com/services/continuation/of/url 拥有自己的服务，当您调用它时，您的服务将调用 https://hooks.slack.com/services/continuation/of/url 和 return 松弛响应

如何在 VueJS 上允许请求 header 字段 access-control-allow-origin

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

javascript

http

vue.js

axios

vue-cli-3