Как исправить ошибку «Ответ на предварительный запрос не проходит проверку контроля доступа: у него нет статуса HTTP ok» в приложении реакции с API-интерфейсом nodejs

Question

Я пытался выполнить вызов API (nodejs с экспресс-запуском на локальном хосте) из приложения реагирования, запущенного в браузере на локальном сервере dev (web-pack dev server). Все работало хорошо, пока я не попытался вызвать API. Они оба работают на разных портах.

Я попытался добавить заголовки cors (рекомендуется MDN) как к пост-вызову (из приложения в браузере), так и к ответу от API Nodejs, но ни один из них не решил проблему.

Код для вызова API (в браузере):

const headers = {
  'Content-Type': 'application/json',
  'access-token': '',
  'Access-Control-Allow-Origin': '*',
}

export default async () => {
  try {
    const body = JSON.stringify({
      test: true,
    })
    const response = await fetch('http://localhost:1337/internal/provider/check_email_exist', {
      method: 'POST',
      headers,
      body,
    })
    console.log(response)
  } catch (e) {
    return e
  }
}

Промежуточное программное обеспечение API (в nodejs):

// Verify All Requests
app.use(VerifyToken)

// Compress
app.use(compression())

// Helmet middlware
app.use(helmet())

// Body Parser
app.use(bodyParser.urlencoded({
  extended: false,
}))
app.use(bodyParser.json())

Ожидаемый результат - просто дать код состояния 200 и ответить данными.

Фактический результат:

OPTIONS http://localhost:1337/internal/provider/check_email_exist 404 (Not Found)

Access to fetch at 'http://localhost:1337/internal/provider/check_email_exist' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Answer 1

Поскольку вы используете webpack-dev-server, вы можете использовать опцию proxy DevServerProxy .

Ваша конфигурация будет выглядеть так:

// webpack.config.js
devServer: {
    proxy: {
      '/internal': 'http://localhost:1337'
    }
  }

Поскольку я не вижу ваших express маршрутов по вашему вопросу, я рассуждаю о прокси-маршруте, если ваш API живет на конечной точке /internal, тогда вы должны изменить свой код React следующим образом:

const response = await fetch('/internal/provider/check_email_exist', {
   method: 'POST',
   headers,
   body,
})

Как видите, я опустил https://localhost:1337, потому что опция proxy из webpack-dev-server будет обрабатывать это и перенаправлять на http://localhost:1337. Надеюсь, что это поможет вам. Ура, Зигфрид.

EDIT

Как отмечено в комментарии к вашему вопросу, вы должны установить заголовки на своем express сервере, а не клиенте, для этой задачи вы можете использовать пакет cors-middleware .