Reactjs, CORS errors while making post request using axios

Question

I am using React.js 18 version. Facing CORS issue on a piece of code while making post request using axios. Intentionally not putting the original URL of post request. Attaching API response screenshot files below the code.

I am getting response in postman but not in browser(CORS). All I know from my colleague, this API is build on PHP and according to backend guy things are fine on his side.
I am putting this code here to know what are we doing wrong on front end? We are stuck here since yesterday. Please help!

console response : https://i.stack.imgur.com/HbUjq.png network response : https://i.stack.imgur.com/6xycq.png network response : https://i.stack.imgur.com/5cjey.png postman response : https://i.stack.imgur.com/MxyDT.png

import React, {useState, useEffect} from 'react';
import axios from 'axios';
import './App.css';

function App() {
  const [CaseDetail, setCaseDetail] = useState([]);

  const getCaseDetail = async () => {
const casedetail = {schemeNameDratDrtId:'1',casetypeId:'1',caseNo:'1',caseYear:"2020"}; 
    await axios.post('URL', casedetail,
    {
      headers: {"Access-Control-Allow-Origin": "*"}
    } 
    )
    .then((result) => {
      setCaseDetail(result.data.data)
      })
   }

   useEffect(() => {
    getCaseDetail();  
  }, []);
  console.log(CaseDetail)

  return (
    <div className="App">
      <h2>Welcome to Home Page</h2>
    </div>
  );
}

export default App;

if the above ans is not working then you need to manage it from the backend side. — Kanti vekariya, Jul 14 '22 at 07:18
if no-cors doesn't help, you can check this post's answers https://stackoverflow.com/questions/43262121/trying-to-use-fetch-and-pass-in-mode-no-cors — Deniz Karadağ, Jul 14 '22 at 07:19
yes but my suggestion is to manage it using in backend side if you are using the express js server then pls use this package to manage `cors` [link](https://www.npmjs.com/package/cors) — Kanti vekariya, Jul 14 '22 at 07:22
@neil did you try to make the request without "Access-Control-Allow-Origin": "*" ? — Deniz Karadağ, Jul 14 '22 at 07:23
@DenizKaradağ , same error without "Access-Control-Allow-Origin": "*" — neil, Jul 14 '22 at 07:26
I have seen this problem, it can have several reasons 1- First, if you are in an organization and company, check that the network team has not closed the ports 2- Check the server side that allowed the request 3- Remove the header options from the request — Hossein Azizdokht, Jul 14 '22 at 07:27

score 0 · Answer 1 · answered Jul 14 '22 at 07:19

0

Your server should enable the cross-origin requests, not the client. To do this, you can check this nice page with implementations and configurations for multiple platforms

answered Jul 14 '22 at 07:19

Sathiyaraj

343
3
11

so we are ok on frontend side? – neil Jul 14 '22 at 07:21
Yes. front end everything seems good. – Sathiyaraj Jul 15 '22 at 05:41

constructivelyCriticized · Answer 2 · 2022-07-14T07:41:57.247

-1

This is a security issue from the browser. If you get 200 using postman, this means the problem is that the browser is blocking it. Try to play this again using API testing website like: "reqbin.com", if that works, the backend guys should fix the header problem. I hope this helps.

edited Jul 14 '22 at 07:41

answered Jul 14 '22 at 07:22

constructivelyCriticized

1
2

score -1 · Answer 3 · answered Jul 14 '22 at 08:28

some possiable things that might help:

I am getting response in postman but not in browser(CORS) - this is noraml for CORS problem.
there can be a differnce betweeen fetach and axios requests. so check if fetach works. if so check

Axios fails CORS but fetch works fine

if you need to send a token in a header , make sure that the axios sends it

see How to set header and options in axios?

Reactjs, CORS errors while making post request using axios

3 Answers3