向封闭网络中的用户开放 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/飞行前请求错误错误。

误解

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

它可以在您的计算机上运行，​​因为 React 和 Rail API 都托管在您的计算机上，因此 localhost:3001 可以正确解析。但是，在您的用户计算机上，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！