无法从 react-admin 访问由 rails 开发的 API

Posted 2023-03-04

【中文标题】无法从 react-admin 访问由 rails 开发的 API

【英文标题】：Can't access API developed by rails from react-admin

【发布时间】：2018-11-23 16:49:28

【问题描述】：

在 rails 应用程序中，使用此文件：

config/initializers/cors.rb

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-Total-Count']
  end
end

这个后端运行在http://localhost:3001。

在前端，在react-admin 源中：

src/App.js

import React from 'react';
import  Admin, Resource  from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';
import  PostList  from './posts';

const dataProvider = jsonServerProvider('http://localhost:3001');

const App = () => (
  <Admin dataProvider=dataProvider>
    <Resource name="posts" list=PostList />
  </Admin>
);

export default App;

它运行在http://localhost:3000。

访问前端http://localhost:3000/#/posts时，chrome浏览器控制台报错：

Warning: Missing translation for key: "The X-Total-Count header is missing in the HTTP Response. The jsonServer Data Provider expects responses for lists of resources to contain this header with the total number of results to build the pagination. If you are using CORS, did you declare X-Total-Count in the Access-Control-Expose-Headers header?"

即使在后端设置expose: ['X-Total-Count']，它也表示丢失。为什么？

【参考方案1】：

查看有关数据提供者的文档。 https://marmelab.com/admin-on-rest//RestClients.html

您的 rails 可能与您尝试使用的 jsonServerProvider 提供程序不兼容。 jsonServerProvider 不适合生产使用。它更像是 json-server 兼容的假休息端点的测试/示例提供程序。

如果其中一个预建提供程序不能满足您的需求，您将需要编写自己的传输。这很容易。