Запрос перекрестного происхождения заблокирован для Ax ios POST-запрос (VueJS) - PullRequest
Новая
       11

Запрос перекрестного происхождения заблокирован для Ax ios POST-запрос (VueJS)

1 голос
/ 11 апреля 2020

Я пытаюсь отправить запрос 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>

Кроме того, это сетевое описание моего запроса. По какой-то причине метод является ОПЦИЯ ... enter image description here

Я не могу понять, в чем проблема. Я перепробовал кучу вещей. Буду очень признателен за любую помощь или предложения. Огромное спасибо заранее.

Примечание: эта проблема возникает как на локальном, так и на производственном уровне (Netlify).

Ответы [ 2 ]

0 голосов
/ 11 апреля 2020

Попробуйте запустить браузер без CORS:

Linux Терминал (Chrome Браузер): google-chrome --user-data-dir="/var/tmp/Chrome" --disable-web-security

0 голосов
/ 11 апреля 2020

Оказывается, что используемая мной служба маркетинга электронной почты не допускает вызовов API на стороне клиента по соображениям безопасности.

Если у вас возникла похожая проблема, попробуйте связаться со службой, предоставляющей API. Они могут помочь.

Чтобы обойти это, вы можете использовать один из способов - направить запрос через прокси. Наиболее популярным решением является использование https://cors-anywhere.herokuapp.com/. Вы в основном добавляете эти URL к вашему запросу следующим образом: 

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',
    }
})

Надеюсь, это поможет.

...