如何从 Rails api-pagination gem 在 React 中访问响应 headers

Question

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

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

这是 gem 自述文件的一部分，它表示您可以通过 headers:

访问下一个和上一个

$ 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 前端访问它们的方法。感谢您提供的任何帮助。这是 gem 的 url：api-pagination gem

Answer 1

您是否通过获取请求在 React 中访问此数据？像

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

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

Answer 2

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

Answer 3

这是 CORS 限制。

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

只有这样，您才能在 CORS 请求中访问任何 header。

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

Answer 4

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

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

然后在 front-end 我刚刚使用：

response.headers.get("my_attribute_name")

这解决了我的问题。

Answer 5

实际上它对我有用。如果有人通过搜索来到这里。在您的 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

添加 expose 后，您将能够在 client-side 代码中使用 response.headers.get("X-Pagination").

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

如何从 Rails api-pagination gem 在 React 中访问响应 headers

how to access response headers in React from Rails api-pagination gem

ruby

pagination

ruby-on-rails

will-paginate

reactjs