在本地运行 React/Rails 应用程序

Posted 2023-02-25

【中文标题】在本地运行 React/Rails 应用程序

【英文标题】：Running a React/Rails app locally

【发布时间】：2017-12-09 12:02:03

【问题描述】：

我正在尝试在本地运行具有 React/Redux 前端并与 rails api 通信的应用程序。在我的.env file 中，我引用了运行我的 api 的端口（@98​​7654326@ 让它在端口上运行为API_URL 3000），并且我的反应开发服务器在HOST 中引用，在 localhost:3003 上运行。

当我转到 localhost:3003 并设置我的 react font-end 时，当我向我的 api 发送请求时收到以下错误：Bothy me .env 文件也指向 localhost 上的正确端口。

XMLHttpRequest 无法加载 http://localhost:3000/users_company。不 请求中存在“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“http://localhost:3003” 使用权。响应的 HTTP 状态代码为 500。

有什么想法吗？

【问题讨论】：

CORS error on same domain?的可能重复

***.com/questions/20035101/…

这个 React 应用程序是使用 create-react-app 创建的吗？

是的，它是使用 create-react app 创建的

“响应的 HTTP 状态代码为 500”

【参考方案1】：

在使用 create-react-app 创建的 react 应用程序中，您可以在 react 应用程序的 package.json 中添加代理。这是我自己的项目中的一个示例。

  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:8000",
  "dependencies": 
    "@types/jest": "^19.2.3",
    "@types/node": "^7.0.18",
    "@types/react": "^15.0.24",
    "@types/react-dom": "^15.5.0",
    "@types/react-router-dom": "^4.0.4",
    "@types/socket.io": "^1.4.29",
    "@types/socket.io-client": "^1.4.29",
    "axios": "^0.16.1",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-router-dom": "^4.1.1",
    "socket.io": "^2.0.1",
    "socket.io-client": "^2.0.1"
  ,
  "devDependencies": 
    "react-scripts-ts": "1.4.0"
  ,
  "scripts": 
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  

Webpack 将接收请求并将它们代理到 package.json 中指定的 url，然后 CORS 将为您处理。当然，这可以在手动创建的 react 应用程序中完成，但这意味着也需要手动配置 webpack 以代理请求。

我还应该指出，现在在您的代码中，您不需要像 http://localhost:8000/api/something/some 那样编写整个 url，而只需编写 api/something/some。当然，这对部署非常有帮助，因为现在我们不关心 url 的第一部分，它显然从 dev 到 production 的变化。

【参考方案2】：

对于迁移到此答案且使用 Webpack 但未使用 Create React App 的任何人，如果您使用 webpack-dev-server，您仍然可以设置代理。这适用于 Webpack 上的任何 javascript 前端，而不仅仅是 React。

例如，我在 localhost:8080 上运行我的前端，而 Rails 在 localhost:3000 上。在您定义 devServer 的部分的 webpack.config.js 文件中：

  devServer: 
    // ...
    // Rails backend runs on localhost:3000
    proxy: 
      '/': 
        target: 'http://localhost:3000',
        secure: false
      
    
  ,

您可以在此处的Webpack docs here 和http-proxy-middleware docs 中阅读有关配置选项的更多信息（基础依赖项）。

【参考方案3】：

是的，我怀疑这也是 CORS 的问题，评论只是因为它是 CORS + Rails 特定的，而不是在 Node 中解决。

有一个名为 rack-cors 的 Gem，可让您将 CORS 的 Access-Control-Allow-Origin 标头设置为呈现的页面。

您将 gem 设置到 Rails 中间件链中，并允许来自 *（最简单的）或您可能会看到来自特定主机的请求（更安全，但令人讨厌）。

有一篇很棒的博客文章：Navigating CORS using React and Rails。

您还可以考虑通过资产管道为您的 React 应用程序提供服务（甚至可以通过 git 子模块，或者只是一个本地符号链接，如果您想让您的前端应用程序存在于与后端不同的存储库中（因为请这样做）： react-rails-hot-loader

【讨论】：

嘿，我正在使用 rack-cors，它全部设置在我的 config/applications.rb 文件中，但仍然是 cors 错误

使用 curl 看看是否返回了 CORS 标头？我的机架上发生了这种情况，我忘记了解决方案是什么，除了在它上面敲了一下（而且我离我能看到的地方很远......）