2017-09-13 1 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

같은 것을 수행 DevTools로를 열고 네트워크 탭을 확인할 수 있습니다. 요청을보아야하며 요청을 클릭하면 반환 된 데이터를 볼 수 있습니다. –

+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 
     } 
    }) 
} 

당신은 단순히 당신이 크롬을 사용하는 경우, 아래

return fetchUtils.fetchJson(url, options) 
.then(res => { 
    console.log(res) 
    return res 
}) 
관련 문제