无法在 ReactJS 从 Rails 获取数据

Posted 2023-03-04

【中文标题】无法在 ReactJS 从 Rails 获取数据

【英文标题】：Cannot fetch data from Rails at ReactJS

【发布时间】：2020-02-27 10:12:09

【问题描述】：

我使用的前端源是端口 5555 的 ReactJS，我的后端是端口 8888 的 Rails。我试图通过使用以下方法从 Rails 获取数据：

const url = 'http://localhost:8888/problems';
fetch(url)
  .then(res => 
    res.json();
  )
  .then(response => 
    console.log(response);
  )
  .catch(error => 
    console.log(error);
  );

但我收到了消息：

Access to fetch at 'http://localhost:8888/problems' from origin 'http://localhost:5555' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我不知道那个错误。请帮我解决它

【问题讨论】：

您从浏览器收到 CORS 错误。您的 Rails 服务器需要设置标题 Access-Control-Allow-Origin: *。这是因为由于端口不同，您的网页和服务器在技术上是不同的来源。

跟reactjs没关系。是CORS问题，在rails中查看如何处理：***.com/questions/29751115/…

@Benjamin 我应该在哪里设置？

【参考方案1】：

阅读更多关于CORS

要解决此问题，您需要在 Gemfile 中添加 rack-cors gem gem 'rack-cors'

在config/application.rb

# Rails 5

config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'
    resource '*', headers: :any, methods: [:get, :post, :options]
  end
end

# Rails 3/4

config.middleware.insert_before 0, "Rack::Cors" do
  allow do
    origins '*'
    resource '*', headers: :any, methods: [:get, :post, :options]
  end
end

这对您当地的人来说就足够了。如果您部署代码，则需要对其进行修改。

【参考方案2】：

正如评论所说，这是一个 CORS 错误。

你可以根据这个问题allow-anything-through-cors-policy修复它