Problem with CORS on React and PUT Ajax PUT request

Question

I have an issue with my app. I use Express/node for the API and try to access it with React which works fine with Axios.

now I tried a DevExpress grid component to display data. fetching data is working fine but if I want to edit and save I get always a CORS error.

My settings on express:

app.use(
  cors({
    origin: '*',

    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  })
);

The API looks like this:

router.put('/dataToEdit', auth, (req, res) => {
  MasterData.updateData(req, res);
});

If I want to call and bind to the grid:

  const dataSource = createStore({
    key: 'helperboxTypeId',
    loadUrl: `${url}/getAlldataToEdit`,
    insertUrl: `${url}/dataToEdit`,
    updateUrl: `${url}/dataToEdit`,
    deleteUrl: `${url}/dataToEdit`,
    onBeforeSend: (method, ajaxOptions) => {
      ajaxOptions.headers = {
        'Content-Type': 'application/json',
        'x-auth-token': localStorage.token,
      };
      ajaxOptions.crossDomain = true;
    },
  });

I tried it I think with every possible constellation of settings and I'm searching for about 1 day in several forums before I asked this :) maybe somebody is using the same component and can help somehow. the error is:

Access to XMLHttpRequest at 'http://localhost:5000/api/masterData/dataToEdit' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Another solution could be that I use Axios there but was not able to integrate it.

Many thanks in advance!

Do you have middleware about cors in the top of your code? Does it go first? — Oro, Aug 24 '21 at 11:57
Hi thanks your comment helped... i was i don't know why... not able to find the error :D — Ernő László, Aug 24 '21 at 18:45

score 0 · Answer 1 · answered Aug 24 '21 at 12:01

0

You should allow Access-Control-Allow-Origin as following:

app.all('/*', function (req, res, next) {
 res.header("Access-Control-Allow-Origin", "*");
 res.header("Access-Control-Allow-Headers", "X-Requested-With");
 next();
});

answered Aug 24 '21 at 12:01

ASANIAN

372
2
8

score -1 · Answer 2 · answered Aug 24 '21 at 18:47

Finally i found it thanks for the eye opener comments :)

the problem was that i missed at the top of the backend server.js a line i added weeks ago...

app.get('/', (req, res) => res.send(text.SERVER_API_RUNNING));

and seems if i add the cors setting then it works only for a part of my API's.

Problem with CORS on React and PUT Ajax PUT request

2 Answers2