如何从 Rails api-pagination gem 访问 React 中的响应头答案

【问题标题】：how to access response headers in React from Rails api-pagination gem如何从 Rails api-pagination gem 访问 React 中的响应头
【发布时间】：2018-07-04 00:31:18
【问题描述】：

所以我让这个 gem 来限制 JSON 响应中返回的数量。但是，我不确定如何访问标题中的链接，以便您访问下一页和上一页。这是我的控制器：

def index
    movies = Movie.all
    paginate json: movies, per_page: 50
end

这是 gem 的自述文件的一部分，它说您可以通过标题访问 next 和 prev：

$ curl --include 'https://localhost:3000/movies?page=5'
HTTP/1.1 200 OK
Link: <http://localhost:3000/movies?page=1>; rel="first",
  <http://localhost:3000/movies?page=173>; rel="last",
  <http://localhost:3000/movies?page=6>; rel="next",
  <http://localhost:3000/movies?page=4>; rel="prev"
Total: 4321
Per-Page: 10
# ...

我可以在 Postman 中看到它们，但还没有找到在我的 React 前端访问它们的方法。感谢您提供的任何帮助。这是宝石的网址：api-pagination gem

【问题讨论】：

这与react无关；就像使用任何 js 代码一样进行操作。同样对于其他 API，为什么您将这么多相关数据放在标头而不是响应 JSON 中？？

标签： ruby-on-rails ruby reactjs pagination will-paginate

【解决方案1】：

您是否通过 fetch 请求访问 React 中的这些数据？像

fetch('url').then(res => {res.json()})

您应该能够使用fetch('url').then(res => res.headers) 访问标题。然后，您可以操纵它们或将它们保存到状态或您想对它们做的任何事情。获取 API 文档here。

【讨论】：

是的，这就是我在 React 中访问数据的方式。我试过了，它们只是一个空对象。
你找回了正确的身体吗？通过标题访问链接真的有必要吗？我假设如果你在第 1 页，你可以直接点击/movies?page2。
另外，如果您打开检查器工具并查看网络选项卡中的响应，您应该会看到该响应。那里有标题吗？
是的，我可以获取第一页的数据。哦，亲爱的，他们在那里。一个人将如何访问这些？
嗯，我找到了this。它可能与 Rails 后端的 CORS 有关。

【解决方案2】：

我在类似情况下所做的是在我的 rails 控制器中添加以下内容：

response.header['my_attribute_name'] = my_value headers['Access-Control-Expose-Headers'] = 'my_attribute_name'

然后在我刚刚使用的前端：

response.headers.get("my_attribute_name")

这解决了我的问题。

【讨论】：

不错。下次我会试一试。但这个问题在于我对如何使用 React 这个 gem github.com/davidcelis/api-pagination 的理解

【解决方案3】：

实际上它对我有用。如果有人通过搜索来到这里。在 Rails 应用的 cors 配置中添加 expose: ['header-key']。

Rails.application.config.middleware.insert_before 0, Rack::Cors do
    allow do
      origins '*'
  
      resource '*',
        headers: :any,
        methods: [:get, :post, :put, :patch, :delete, :options, :head], expose: ['X-Pagination']
    end
end

添加暴露后，您将能够通过使用 response.headers.get("X-Pagination") 获取客户端代码中的标题键。

注意：- 我使用 fetch API call resonse 验证了它。

【讨论】：

【解决方案4】：

response.headers.get('Link') 解决了！

【讨论】：

【解决方案5】：

这是CORS 限制。

您用于分页的白名单标题（通过在服务器中实现Access-Control-Expose-Headers）。

只有这样您才能访问 CORS 请求的任何标头。

另请注意，此限制不适用于来自同一来源的请求。

【讨论】：