[使用jsonPlaceHolder和react-admin时出现CORS错误

Question

[尝试从https://jsonplaceholder.typicode.com获取数据时收到CORS错误。

我已经在Google Chrome，Brave Browser，Firefox和Safari上进行了测试。我关注网站上的教程。我的代码如下：

import React from 'react';
import { Admin, Resource, ListGuesser } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';
import './App.css';

const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');
const App = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name='users' list={ListGuesser} />
  </Admin>
);

export default App;

错误：

Access to fetch at 'https://jsonplaceholder.typicode.com/users?_end=10&_order=ASC&_sort=id&_start=0' from origin 'http://192.168.1.175:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我尝试使用：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security

打开Chrome，我仍然收到错误

Answer 1

您需要添加custom header

import { fetchUtils, Admin, Resource } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';

const httpClient = (url, options = {}) => {
    if (!options.headers) {
        options.headers = new Headers({ Accept: 'application/json' });
    }
    // add your own headers here
    options.headers.set('X-Custom-Header', 'foobar');
    return fetchUtils.fetchJson(url, options);
};
const dataProvider = jsonServerProvider('http://jsonplaceholder.typicode.com', httpClient);

render(
    <Admin dataProvider={dataProvider} title="Example Admin">
       ...
    </Admin>,
    document.getElementById('root')
);