2017-09-13 4 views
0

情報を表示するためにヘッダー内のトークンを使用してコールを実行しようとしています。必要なヘッダートークンがあるので、私のコードはrestClient.js、app.js、およびusers.jsのようになります。サーバーがデータを送信していても、REST呼び出しのデータを表示できません。

//restClient.js 
import { jsonServerRestClient, fetchUtils } from 'admin-on-rest'; 

const httpClient = (url, options = {}) => { 
    if (!options.headers) { 
     options.headers = new Headers({ Accept: 'application/json' }); 
    } 
    options.headers.set('token', 'admin'); 
    return fetchUtils.fetchJson(url, options); 
} 

const restClient = jsonServerRestClient('http://localhost:8080/api/v2', httpClient); 

export default (type, resource, params) => new Promise(resolve => setTimeout(() => resolve(restClient(type, resource, params)), 500)); 

//App.js 
import React, {Component} from 'react'; 
import { Admin, Resource } from 'admin-on-rest'; 

import { UserList } from './users'; 
import restClient from './restClient'; 

class App extends Component { 
    render() { 
    return(
      <Admin restClient={restClient}> 
       <Resource name="admin/user" list={UserList}/> 
      </Admin> 
    ); 
    } 
} 
export default App; 

//Users.js 
// in src/users.js 
import React from 'react'; 
import { List, Datagrid, EmailField, TextField, SimpleList } from 'admin-on-rest'; 

export const UserList = (props) => (
    <List {...props}> 
     <Datagrid > 
      <TextField source="email"/> 
      <TextField source="info"/> 
     </Datagrid> 
    </List> 
); 

Example of JSON

私は郵便配達で、私の残りのコールをテストしてみたし、それは間違いなく、データを返しています。とにかく、通話中にどのデータが送り返されているかを確認するにはどうしますか?サーバーはexpress.jsを実行しており、必要なヘッダーを含めるようにルートを設定しました。また、私のJSONがどのように見えるかの例を添付しました。

+3

ような何かをデベロッパーツールを開き、[ネットワーク]タブを確認することができます。あなたの要求が表示され、クリックすると返されたデータを見ることができます。 –

+1

CORSコントロールをチェックアウトしていましたか? – DvTr

答えて

0

コメントはまだありませんが、Fiddler 4は、UIがサーバーに送信している内容を確認するのに適しています。

1

aor fetchUtilsは約束を返します。あなたは約束を傍受し、あなたが望むあらゆる種類の検査を実行することができます(さらに多くのことを行う)

以下は、私のコードがどのように似ているかを示しています。また、API呼び出しをインターセプトしてカスタム通知を表示しています。

function handleRequestAndResponse(url, options={}) { 
    return fetchUtils.fetchJson(url, options) 
    .then((response) => { 
     const {headers, json} = response; 
     //admin on rest needs the {data} key 
     const data = {data: json} 
     if (headers.get('x-total-count')) { 
     data.total = parseInt(headers.get('x-total-count').split('/').pop(), 10) 
     } 
     // handle get_list responses 
     if (!isNaN(parseInt(headers.get('x-total-count'), 10))) { 
     return {data: json, 
       total: parseInt(headers.get('x-total-count').split('/').pop(), 10)} 
     } else { 
     return data 
     } 
    }) 
} 

あなたは、単にあなたがChromeを使用している場合、下記の

return fetchUtils.fetchJson(url, options) 
.then(res => { 
    console.log(res) 
    return res 
}) 
関連する問題