Разрешение CORS из React-интерфейса не разрешать Express-серверу использовать Bing API

Question

У меня в настоящее время есть мой передний и задний части отдельноКогда я запускаю свое приложение React на localhost:3000, чтобы запустить приложение Express на localhost:8000/search/results?search_query=, CORS блокирует меня.Поэтому я установил это в файле app.js моего бэкэнда Express:

app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
});

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));

app.use('/', index);
app.use('/search', search);
app.use('/results', result);

app.listen(8000, () => {
    console.log('App listening on port 8000...')
})

Я вызываю свой внутренний маршрут из моего внешнего интерфейса, используя эту функцию в React:

 bingSearch(term) {
    fetch('http://localhost:8000/search/results?search_query=' + term)
    .then((response) => {
      response.json()
      .then((json) => {
        this.setState({results: json})
      })
    })
  } 

Я не получаю ошибку CORS после этого.Однако маршрут, по которому я иду, - это маршрут, использующий API Bing Web Search, у которого есть ключ подписки, который я передаю через заголовок для этого запроса GET.Мое приложение, однако, просто зависает сейчас.

Как и где я должен разрешать CORS, который позволит моему внешнему интерфейсу подключаться к моему внутреннему интерфейсу, но не будет нарушать мой запрос GET API Bing?

Answer 1

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

res.header(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, BING_API_HEADER'
  );

Так что в начале вам понадобится заголовок setиспользуя то же имя, что и BING_API_HEADER.Это позволит вам получить доступ к информации заголовка с вашего сервера.Как только вы получите заголовок, вы можете использовать его для выполнения вызовов API.

Answer 2

Вам необходимо вызвать next () в вашем промежуточном программном обеспечении.

app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

Подробнее об этом можно прочитать здесь: https://expressjs.com/en/guide/writing-middleware.html

Answer 3

Для этого вы можете использовать прокси-сервер cors.Тем не менее, это хорошо только для целей тестирования.Для производства вам необходимо иметь вызовы на стороне сервера в Bing API.Больше информации здесь: https://docs.microsoft.com/en-us/azure/cognitive-services/bing-web-search/bing-web-search-resource-faq.