Включить CORS в моем приложении React с Node.js

Question

Я использовал create-реакции-приложение для создания своего приложения реакции. Это приложение выполняет вызов POST для другого API (asticsearch), размещенного на другом сервере (не принадлежит мне / не управляется мной). Поэтому, как только пользователь вводит данные в форму, onSubmit в основном вызывает метод getResponse (), который выполняет вызов. Инициализировать клиента:

let client = new elasticsearch.Client({
    host: "https://{cred.user}:{cred.pass}@@servername.domain:11121",
    log: "trace",
});

Запрос API:

getResponse = () => {
        client
          .search({
            index: 'custom_index_1',
            body: {
                query: {
                    match: {"data": this.state.data}
                },
            }
        },function(error, response, status) {
            if (error) {
                const errorMessage= {error};
                console.log(errorMessage);
            }
            else {
                this.setState({results: response.hits.hits});
                console.log(this.state.results);
            }
        });
    }

Но я получаю сообщение об ошибке CORS следующим образом:

Failed to load resource: the server responded with a status of 403 (Forbidden)
localhost/:1 Access to XMLHttpRequest at 'https://servername.domain:11121/' from origin 'http://localhost:3000' 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.console.js:40 
WARNING: 2019-11-21T07:54:32Z No living connections

После прочтения в SO ота же проблема, я обнаружил, что использование модуля cors npm может решить эту проблему (по крайней мере, в разработке). Но я не понимаю, куда мне поместить этот код:

var express = require('express')
var cors = require('cors')
var app = express()
app.use(cors())

ИЛИ

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

app.get('/products/:id', function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for all origins!'})
})

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

У меня следующие вопросы: 1. Где я могу добавить этот код выше? в app.js моего реагирующего приложения? Если да, может кто-нибудь дать мне пример, пожалуйста. Я использую что-то вроде этого:

import statements
class App extends Component {
 <code>
}
export default App;

Если этот код будет добавлен в какой-либо другой файл, то в каком файле? Это server.js? Если да, где я могу найти это? Я использую Windows 7. Узел установлен в каталоге клиента: C: \ MYSW \ NodeJs \ 12.1.0. Я вижу некоторые server.js здесь: C: \ Users \ user1 \ Scratch \ node \ myreact_ui \ node_modules \ реагировать-dom \ server.js, но это правильный файл

Пожалуйста, дайте мне пример того, как код добавляется и где именно в файле. Я новичок в React и Node, поэтому я мало что знаю о внутренностях. Я застрял здесь уже несколько дней и действительно нуждаюсь в помощи. Спасибо.

Везде, где написано, добавьте этот код, и он работает, никто не упоминает, где его добавить и как? Любая помощь приветствуется.

Answer 1

Вам необходимо настроить прокси-сервер для запросов API - https://create -react-app.dev / docs / proxying-api-request-in-development /

Iне до конца понимают детали сервера Elastic, но вы можете поместить код Express в файл src/server.js, вдохновленный https://stackoverflow.com/a/20539239/1176601:

var express = require('express')
var request = require('request')
var cors = require('cors')
var app = express()

app.use(cors())

app.use('/', function(req, res) {
  var url = 'https://' +
    req.get('host').replace('localhost:80', 'servername.domain:11121') + 
    req.url
  req.pipe(request({ qs:req.query, uri: url })).pipe(res);
})

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

update package.json

"scripts": {
   ...
   "server": "node src/server.js"
},
"proxy": "http://localhost:80"

Измените ваш клиент:

let client = new elasticsearch.Client({
    host: "{cred.user}:{cred.pass}@@localhost:80",
    log: "trace",
});

И запустите его с помощью npm run server (до или после npm start, например, в отдельном терминале).

Перед первым запуском вам потребуетсяустановить все модули require d, npm i -D express request cors.

Answer 2

Вы должны добавить это в файл, где вы настраиваете сервер, который вы используете. Если бы вы использовали Express, вы бы добавили это в файл server.js, о котором вы говорите, но, похоже, у вас есть сервер Flexiblesearch и приложение реагирования, поэтому у вас нет серверной части node.js.

Возможно, выдолжен будет включить конфигурацию cors в сервер эластичного поиска.

Answer 3

Добавьте приведенный ниже код в узел js API

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

или

//allow OPTIONS on all resources
app.options('*', cors())