向封闭网络中的用户开放 Rails API

Question

我正在尝试运行在本地为封闭网络中的 2-3 位用户创建一个 React/Rails 网站。目前，用户可以访问 React 部分（我将其设置为端口 80）。问题是，我为 Rails 后端设置的 API 调用都在 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 调用吗？

React 在此 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);});
    }

Answer 1

问题

除非我遗漏了什么，否则你似乎犯了一个简单的错误，你会为此自责。

通常，JavaScript 应用程序中的 CORS 问题会在浏览器的 JavaScript 控制台中产生 CORS/pre-flight 请求错误。

误解

构成 React 应用程序的 JavaScript 由客户端（即您的用户）下载。之后，在客户端计算机上执行提取调用。获取请求并非来自 服务器 ，而是来自 远程端 。

它可以在您的计算机上运行，因为 React 和 Rail API 都托管在您的计算机上，因此 localhost:3001 可以正确解析。但是，在您的 users 计算机上，React 应用程序尝试在 他们的 计算机上的端口 3001 上查找服务运行。

初始解

您需要告诉 React 访问托管 API 的 IP 服务器，如下所示：

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);});
}

这将在使用 npm run start 服务 React 时自动解析为 localhost，然后在服务由 npm run build 生成的静态文件时解析为 <server_ip>。

请随时对此答案发表评论。我很乐意回答您的任何其他问题。欢迎使用 React！

向封闭网络中的用户开放 Rails API

Opening up Rails API to users within a closed network

backend

rails-api

ruby-on-rails-4

reactjs

server