Предварительный запрос CORS не обрабатывается внешним API

Question

Я пытаюсь создать приложение для getresponse.com .У него есть собственный API, который находится по адресу https://api.getresponse.com. Когда я пытаюсь сделать любой браузер формы запроса javascript с Axios или Fetch, у меня появляется эта ошибка:

Access to XMLHttpRequest at 'https://api.getresponse.com/v3/accounts' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

И на вкладке сетиУ меня есть:

Request URL: https://api.getresponse.com/v3/accounts
Request Method: OPTIONS
Status Code: 400 Bad Request

Итак, насколько я понимаю, API не может правильно работать со «сложными» запросами из веб-браузера.

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

Я прав?Я не могу найти никаких примеров такого промежуточного программного обеспечения.Где я могу найти любую информацию?

Answer 1

Предварительный запрос CORS - это запрос CORS, который проверяет, понятен ли протокол CORS, и знает ли сервер, используя определенные методы и заголовки.

Подробнее о предварительном запросеможно найти здесь.

Возможно, вам следует изучить, как обрабатывать Политику безопасности содержимого на вашем сервере.Все запросы, которые вы делаете из javascript, будут проверены браузером.Таким образом, ваш сервер должен ответить с заголовком Access-Control-Allow-Origin Подробнее о заголовке здесь

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

Поскольку у вас нет контроля над сервером API, вы можете создать прокси-сервер для связи с внешними серверами.Вы можете найти подробное руководство по здесь .

Вот пример конфигурации vhost nginx, которая обрабатывает прокси для всех запросов с /api до https://api.example.com

server {
  listen 80;
  server_name example.com;   # Your server domain, in your case localhost
    location /api {
      access_log off;
      proxy_pass https://api.example.com;  # <--- this will the target domain
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header Host $host;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

Таким образом, если вы наберете http://example.com/api/v3/accounts, это будет перенаправлено на https://api.example.com/api/v3/accounts.

В основном в вашем ответе должны быть указаны следующие заголовки.

Access-Control-Allow-Origin: https://yourdomain.com

Вы также можете иметь нижеконфигурации.

Access-Control-Allow-Origin: *

Если вы используете withCredentials , тогда вы не можете использовать подстановочный знак * для заголовка Access-Control-Allow-Origin, вам следует явно указать домен.

Answer 2

Джеймс ответ в порядке, но сейчас мне удобнее решение на основе Node.js, а не Nginx, так как я работаю локально на Windows.Я подошел к решениям с сервером Express:

var cors = require('cors')
var app = express()
var proxy = require('express-http-proxy'); 

app.use(cors())

app.use('/', proxy('https://api.getresponse.com'))

app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80')
})