Rails API на веб-интерфейсе nginx + React, возвращающем ту же политику происхождения, запрещает чтение удаленного ресурса

Question

Я создаю приложение Rails только для API, работающее на nginx, и у меня есть веб-интерфейс реакции в другом домене, всякий раз, когда я пытаюсь сделать запрос к серверу api, как реагируют, выбирают и axios возвращают The Same Origin Policy disallows reading the remote resource. Когда я использую curl или postman для тестирования API, они оба работают, и я получаю соответствующие заголовки. Я пробовал использовать стеллажи, но он не вставляет заголовки за прокси-сервером, поэтому мой виртуальный хост для API настроен так:

# Thin Ruby server
upstream rails_app {
  server 127.0.0.1:3000;
}

server {
  listen 80;
  listen 443 ssl;
  server_name api.myapp.com;

  ssl_certificate /myapp-secure/myapp.crt;
  ssl_certificate_key /myapp-secure/myapp.key;

  access_log /myapp-api/log/access.log;
  error_log  /myapp-api/log/error.log;
  root       /myapp-api/public/;
  index      index.html;

  add_header 'Access-Control-Max-Age' 17280000;
  add_header 'Access-Control-Allow-Origin' '*';
  add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
  add_header 'Access-Control-Allow-Credentials' 'true';
  add_header 'Access-Control-Request-Method' '*';
  add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, Authorization';
  add_header 'Access-Control-Expose-Headers' 'Authorization' always;

  location / {
    try_files $uri @rails;
  }

  location @rails {
    proxy_set_header  X-Real-IP $remote_addr;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header  Host $http_host;
    proxy_redirect off;
    proxy_pass http://rails_app;
  }
}

И у меня есть базовая функция входа в систему на внешнем интерфейсе, чтобы проверить работающую конечную точку API (Должен просто вернуть ошибку, что имя пользователя / пароль не было предоставлено):

  login() {
    axios.post('https://api.myapp.com/v1/login', {
      crossdomain: true
    })
      .then(res => res.json)
      .then(res => console.log(res))
      .catch(error => console.log(error))
  }

У меня есть заголовки webpack-dev-server, настроенные так:

headers:
  'Access-Control-Allow-Origin': '*'
  'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS'
  'Access-Control-Allow-Headers': '*'

Я не уверен, что я делаю неправильно, и я трачу слишком много времени, пытаясь решить эту проблему, любая помощь будет принята с благодарностью!

Answer 1

Моя проблема состояла из двух частей, но я смог решить ее и определить, что происходит:

1. Вы не можете использовать домены localhost, .dev или .localпри выполнении запросов CORS.Они будут всегда отклоняться независимо от того, какую политику доступа вы установили.
2. Ответы от nginx будут включать соответствующие заголовки , за исключением для случая запроса xhr, вв этом случае возвращаются только заголовки ответа от прокси-службы.(По сути, не устанавливайте заголовки в nginx, пусть ваше приложение обрабатывает их. В моем случае стойка-корс выполнила свою работу, но только после того, как я удалила все заголовки из nginx)