Erstellen eines benutzerdefinierten Restclients

Question

Ich lerne, wie man einen benutzerdefinierten Restclient erstellt, um mit einer unruhigen API aus der Flasche zu kommunizieren, um sie auf Admin-on-Rest zu verwenden.

Ich versuche die case GET_LIST zu lösen, aber ich habe keinen Erfolg, und ich weiß nicht, was ich als nächstes tun kann?

ich diesen Fehler zuerst

API holen kann nicht localhost laden: 5000/api/.... Die Antwort auf die Preflight-Anforderung übergibt die Zugriffskontrollprüfung nicht: Auf der angeforderten Ressource ist kein Header "Access-Control-Allow-Origin" vorhanden. Herkunft 'localhost: 3000'; ist daher der Zugriff nicht erlaubt. Wenn eine undurchsichtige Antwort Ihren Anforderungen entspricht, stellen Sie den Modus der Anfrage auf "Nein", um die Ressource mit deaktiviertem CORS zu holen.

Im Moment habe ich diesen Code unter

import { 
GET_LIST, 
GET_ONE, 
GET_MANY, 
GET_MANY_REFERENCE, 
CREATE, 
UPDATE, 
DELETE, 
fetchUtils, 
} from 'admin-on-rest'; 

const API_URL = 'http://localhost:5000/api'; 

/** 
* @param {String} type One of the constants appearing at the top if this file, e.g. 'UPDATE' 
* @param {String} resource Name of the resource to fetch, e.g. 'posts' 
* @param {Object} params The REST request params, depending on the type 
* @returns {Object} { url, options } The HTTP request parameters 
*/ 
const convertRESTRequestToHTTP = (type, resource, params) => { 
    let url = ''; 
    const { queryParameters } = fetchUtils; 
    const options = {}; 
    switch (type) { 
    case GET_LIST: { 
     const { page, perPage } = params.pagination; 
     const { field, order } = params.sort; 
     const query = { 
      sort: JSON.stringify([field, order]), 
      range: JSON.stringify([(page - 1) * perPage, page * perPage - 1]), 
      filter: JSON.stringify(params.filter), 
     }; 
     url = `${API_URL}/${resource}?${queryParameters(query)}`; 
     break; 
    } 
    case GET_ONE: 
     url = `${API_URL}/${resource}/${params.id}`; 
     break; 
    case GET_MANY: { 
     const query = { 
      filter: JSON.stringify({ id: params.ids }), 
     }; 
     url = `${API_URL}/${resource}?${queryParameters(query)}`; 
     break; 
    } 
    case GET_MANY_REFERENCE: { 
     const { page, perPage } = params.pagination; 
     const { field, order } = params.sort; 
     const query = { 
      sort: JSON.stringify([field, order]), 
      range: JSON.stringify([(page - 1) * perPage, (page * perPage) - 1]), 
      filter: JSON.stringify({ ...params.filter, [params.target]: params.id }), 
     }; 
     url = `${API_URL}/${resource}?${queryParameters(query)}`; 
     break; 
    } 
    case UPDATE: 
     url = `${API_URL}/${resource}/${params.id}`; 
     options.method = 'PUT'; 
     options.body = JSON.stringify(params.data); 
     break; 
    case CREATE: 
     url = `${API_URL}/${resource}`; 
     options.method = 'POST'; 
     options.body = JSON.stringify(params.data); 
     break; 
    case DELETE: 
     url = `${API_URL}/${resource}/${params.id}`; 
     options.method = 'DELETE'; 
     break; 
    default: 
     throw new Error(`Unsupported fetch action type ${type}`); 
    } 
    return { url, options }; 
}; 

/** 
* @param {Object} response HTTP response from fetch() 
* @param {String} type One of the constants appearing at the top if this file, e.g. 'UPDATE' 
* @param {String} resource Name of the resource to fetch, e.g. 'posts' 
* @param {Object} params The REST request params, depending on the type 
* @returns {Object} REST response 
*/ 
const convertHTTPResponseToREST = (response, type, resource, params) => { 
    const { headers, json } = response; 
    switch (type) { 
    case GET_LIST: 
     return { 
      data: json.map(x => x), 
      total: parseInt(headers.get('content-range').split('/').pop(), 10), 
     }; 
    case CREATE: 
     return { data: { ...params.data, id: json.id } }; 
    default: 
     return { data: json }; 
    } 
}; 

/** 
* @param {string} type Request type, e.g GET_LIST 
* @param {string} resource Resource name, e.g. "posts" 
* @param {Object} payload Request parameters. Depends on the request type 
* @returns {Promise} the Promise for a REST response 
*/ 
export default (type, resource, params) => { 
    const { fetchJson } = fetchUtils; 
    const { url, options } = convertRESTRequestToHTTP(type, resource, params); 
    return fetchJson(url, options) 
     .then(response => convertHTTPResponseToREST(response, type, resource, params)); 
}; 

Answer 1

Sie müssen Ihren Server konfigurieren, dass Anforderungen von localhost:3000 zu ermöglichen, indem den richtigen CORS HTTP-Header