forms - Axios POST 请求 (VueJS) 上的跨源请求被阻止

Question

我尝试在表单提交时发送 POST 请求，但一直遇到 CORS 问题。我收到以下错误:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://example.com/api/lists/contacts.
(Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

和

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://example.com/api/lists/contacts.
(Reason: CORS request did not succeed).

这是我的代码:

<template>
   <form @submit.prevent="subscribeEmail" method="post" enctype="multipart/form-data" action="">
     <input type="email" v-model="email" name="user_email">
     <button type="submit" name="button">Subscribe</button>
   </form>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    subscribeEmail() {
        axios({
            method: 'POST',
            url: `https://example.com/api/lists/${id}/contacts`,
            data: {
                "api_key": apiKey,
                "email_address":  this.email,
            },
            headers: {
                'Access-Control-Allow-Origin': '*',
                'Content-type': 'application/json',
            }
        })
        .then(function (response) {
          console.log(response)
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
}
</script>

此外，这是我的请求的网络描述。由于某种原因，该方法是选项...

我不知道问题出在哪里。我尝试了很多事情。我真的很感激任何帮助或建议。提前非常感谢。

注意:此问题在本地主机和生产版本 (Netlify) 上都会发生。

Answer 1

事实证明，出于安全原因，我专门使用的电子邮件营销服务不允许客户端 API 调用。

如果您遇到类似问题，请尝试联系提供 API 的服务。他们也许能提供帮助。

要绕过此问题，您可以使用的一种方法是通过代理定向请求。最流行的解决方案是使用 https://cors-anywhere.herokuapp.com/ 。您基本上可以将此网址附加到您的请求中，如下所示:

axios({
    method: 'POST',
    url: `https://cors-anywhere.herokuapp.com/https://example.com/api/action`,
    data: {
       "api_key": apiKey,
       "email_address":  this.email,
    },
    headers: {
       'Access-Control-Allow-Origin': '*',
       'Content-type': 'application/json',
    }
})

希望这有帮助。