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>

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

我不知道是什么问题。我尝试了一堆东西。我将不胜感激任何帮助或建议。在此先感谢一吨。

注意：此问题在本地主机和生产版本（Netlify）上均同时发生。

Answer 1

出于安全考虑，我原来使用的电子邮件营销服务不允许进行客户端API调用。

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