Axios и Vue не будут делать вызов API на мой сервер из-за проблемы с политикой cors

Question

У меня настроены мои cors на моем экспресс-сервере (Node), например:

server.options('*',cors());
server.use(cors());

, и я делаю вызов на моем веб-сайте Vue следующим образом

axios.default
          .post(url, {
            firstName: this.firstName,
            lastName: this.lastName,
            email: this.email,
            interests: this.interests,
            targetURL: "https://www.joinvurchase.com/email-verified/",
            poolID
          })

Но я получаюследующая ошибка:

has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

Я думаю, что cors на моем сервере настроен правильно, потому что, когда я звоню с помощью почтальона, он работает и возвращает заголовок Access-Control-Allow-Origin →*.Также, когда я звоню на мой сайт, он почти мгновенно выдает ошибку.Так что он может даже не дойти до моего сервера.Точно такая же настройка работает при локальном тестировании.Эта проблема возникает после развертывания сервера и веб-сайта на Heroku.

Answer 1

Я понял это.Я использую домены Google, и у меня была переадресация домена с «mydomain.com» на «www.mydomain.com».предполагая, что это будет работать, я использовал свой URL как mydomain.com.Поскольку эти вызовы переадресовывались, мои вызовы не выполнялись с Redirect is not allowed for a preflight request..Поэтому я просто начал добавлять www в мои URL, и проблема исчезла.

Answer 2

вы можете попробовать это, это решает проблему с сердечниками для меня

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "HEAD, OPTIONS, GET, POST, PUT, DELETE");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
  next();
});