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

Question

我正在尝试在本地运行具有 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。

有什么想法吗？

Answer 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 的变化。

Answer 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 中阅读有关配置选项的更多信息（基础依赖项）。

Answer 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