Открытие Rails API для пользователей в закрытой сети - PullRequest
Новая
       21

Открытие Rails API для пользователей в закрытой сети

0 голосов
/ 11 июля 2019

Я пытаюсь запустить сайт React / Rails локально для 2-3 пользователей в закрытой сети. В настоящее время пользователи могут получить доступ к части React (у меня установлен порт 80). Проблема заключается в том, что все вызовы API, которые я установил в своем бэкэнде Rails, выполняются на localhost:3001, и пользователи имеют нулевой доступ к этой базе данных, когда я пытаюсь отправить HTTP-запросы.

Я знаю, что это проблема CORS, но я думал, что приведенный ниже код позволит любому домену сделать необходимый запрос. 

 Rails.application.config.middleware.insert_before 0, Rack::Cors do
   allow do
     origins '*'

     resource '*',
       headers: :any,
       methods: [:get, :post, :put, :patch, :delete, :options, :head]
   end
end

Работа на стороне сервера - не моя сильная сторона, поэтому я могу упустить что-то вопиющее. Любая идея, как открыть этот бэкэнд, чтобы сетевые пользователи могли совершать API-вызовы на своих концах?

Реагирует на этот ip: http://192.168.2.70:80/ API-вызовы для этого порта: 3001

Пример вызова API из внешнего интерфейса (работает на главном компьютере; не на других пользователях): 

getData = () => {
        axios.get('http://localhost:3001/api/v1/pickup_deliveries')
            .then((response) => {
                this.setState({
                    apiData: response.data})
                })
            .catch((error)=>{console.log(error);});
    }

1 Ответ

1 голос
/ 11 июля 2019

Проблема

Если я не пропустил что-то, похоже, что вы совершаете простую ошибку, за которую собираетесь порвать себя.

Как правило,проблема CORS в приложении JavaScript может привести к ошибке CORS / предполетного запроса в консоли JavaScript вашего браузера.

Заблуждение

JavaScript, составляющийПриложение React загружается клиентом (т.е. вашими пользователями).После этого вызов выборки выполняется на клиентском компьютере .Запрос на выборку исходит не от сервера , а от удаленного конца .

. Он работает на вашем компьютере, поскольку размещены как React, так и Rail API.на вашем компьютере, поэтому localhost:3001 разрешается правильно.Однако на вашем компьютере пользователи приложение React пытается найти службу, работающую на порту 3001 на их компьютере.

Первоначальное решение

Вы должны указать React обратиться к IP-серверу, на котором размещен API, например: 

getData = () => {
    axios.get('http://192.168.2.70:3001/api/v1/pickup_deliveries')
        .then((response) => {
            this.setState({
                apiData: response.data})
            })
        .catch((error)=>{console.log(error);});
}

Долгосрочное решение (для развертывания)

В будущем загляните в dotenv, который позволит вам устанавливать переменные среды React.Вы можете иметь файл .env.local и файл .env.production.

В локальный файл вы можете поместить: 

REACT_APP_BACKEND_SERVER=http://localhost:3001

, а в production вы можете добавить: 

REACT_APP_URL=http:/<server_ip>:3001

Затем в вашей программе:сделать что-то вроде: 

getData = () => {
    axios.get(process.env.REACT_APP_SERVER_URL + "/api/v1/pickup_deliveries")
        .then((response) => {
            this.setState({
                apiData: response.data})
            })
        .catch((error)=>{console.log(error);});
}

Это автоматически разрешится до localhost при обслуживании React с использованием npm run start, а затем разрешится до <server_ip> при обработке статических файлов, созданных с помощью npm run build.

Не стесняйтесь комментировать этот ответ.Я был бы рад ответить на любые другие ваши вопросы.Добро пожаловать в Реакт!

...