K
K
KGZVER2021-01-13 12:11:25
Node.js
KGZVER, 2021-01-13 12:11:25

Why is there a Cors error in React-admin?

I connected the admin panel to the front, in the dataProvider I drove a link to my server on the local, written in Node Js

import React from "react"
import { Admin, Resource } from "react-admin"
import restProvider from 'ra-data-simple-rest'
import PostList from "./PostList";

const AdminPage = () => {
  return (
    <Admin dataProvider={restProvider('http://192.168.88.83:3001')} >
      <Resource name='blogs' list={PostList} />
    </Admin>
  );
}

export default AdminPage

but in the console there is an error
admin#/blogs:1 Access to fetch at ' 192.168.88.83:3001/blogs?filter=%7B%7D&range=%5B0%... ' from origin ' localhost:3000 ' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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.
fetch.js:39 GET 192.168.88.83:3001/blogs?filter=%7B%7D&range=%5B0%... net::ERR_FAILED


A similar error came out earlier, with any requests on the project. Then I inserted the following code into index.js of the server
app.use(function (req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
  res.setHeader('Access-Control-Allow-Credentials', true);
  next();
});


And everything helped, but for some reason the part with the admin panel continues to give the same error, although it is inside the same port

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question