CORS Policy Error only in reactjs when submitting a post request and working in postman

Question

I'm having a "...has been blocked by CORS policy" error when trying to use the method post in my reactjs frontend even though i have enabled the @CrossOrigin annotation in ly spring boot backend and even though when testing the request on postman it works perfectly, the problem is in the frontend and i haven found any helpful solution

Here s my entity class:

@Entity
@Table(name="clientcheck")
public class ClientCheckEntity {

@Id
@Column(name="email")
private String email;


 @Column(name="password")
 private String passwordClient;


public String getEmail() {
    return email;
}


public void setEmail(String email) {
    this.email = email;
}


public String getPasswordClient() {
    return passwordClient;
}


public void setPasswordClient(String passwordClient) {
    this.passwordClient = passwordClient;
}
}

My controller Class

@CrossOrigin(origins = "*", allowedHeaders = "*" )
@RestController
@RequestMapping("/clientschecklist")
public class ClientCheck {

@Autowired
private ClientsFunctionsImpl clientsfunctionsimpl;

@Autowired
private ClientsRepository2 clientsRepository;


@PostMapping("")
public ResponseEntity<ClientCheckEntity> createEmployee(@Valid @RequestBody ClientCheckEntity client) 
{

    ClientCheckEntity client1 = clientsRepository.save(client);

    return new ResponseEntity<ClientCheckEntity>(client1,HttpStatus.CREATED);
}   
}

My Repository Interface :

@Repository
public interface ClientsRepository2 extends JpaRepository<ClientCheckEntity , String>{
}

Frontend

My Signup Class:

import React, { Component } from 'react';
import "bootstrap/dist/css/bootstrap-grid.min.css";
import * as Yup from 'yup';
import Errors from '../Errors';
import {Formik} from 'formik';
import ClientService from './service';


const validationSchema = Yup.object().shape({

email: Yup.string()
.email('Invalid Email Address')
.required('Required Field'),

password: Yup.string()
.min(8,'Minimum 8 Characters')
.required('Required Field'),

 })

class Signin extends Component {
constructor(props){
super(props);
this.state = {
  email:'',
  password:'',
  disable:true
   };

  }


  handleSubmit=(values) =>{
   ClientService.createClient(
    {    
    email: values.email,
    password: values.password 
    }
    ).then(
    console.log(values)
     ).catch(
     console.log("not working")
    )
    }
render() {
  let {email,password} = this.state
    return (
    <div className="wrapper justify-content-center">

        <div className="form-wrapper">
          <h1>
            <b>
              <i>Create an Account</i>
            </b>
          </h1>


          <Formik 
          initialValues={{ email,password}}
          validationSchema = {validationSchema}
          onSubmit={(values, {setSubmitting, resetForm}) => {

          setSubmitting(true);

          setTimeout(() => {
         alert(JSON.stringify(values, null, 2));
         resetForm();
         setSubmitting(false);

         }, 500);
    }}



  >
  {({values, errors, touched, handleChange, handleSubmit,isSubmitting }) => (


          <form className="the-form" onSubmit={handleSubmit}>
            <div className="row">
              <div className="col-md-12 ">
                <input
                  type="text"          
                  placeholder="Enter email"
                  name="email"
                  onChange={handleChange}
                  value={values.email}

                  className={touched.email && errors.email ? "error"  :null }

                />
                <Errors touched={touched.email} message={errors.email} />
              </div>

              <div className="col-md-12 ">
                <input
                  type="password"
                  placeholder="Enter password"
                  name="password"
                  onChange={handleChange}
                  value={values.password}

                  className={touched.password && errors.password ? "error" : null}
                />

                <Errors touched={touched.password} message={errors.password} />
              </div>
              </div>

              <div className="createAccount">
            <button type="submit" className="btn btn-primary btn-block" disabled={isSubmitting} onClick= {this.handleSubmit}>
              Sign Up
            </button>
            <small>
              Already have an account ?

            </small>
          </div>
          </form>

          )}

         </Formik> 
        </div>
      </div>

    );
}
}

export default Signin;

My Service Class:

   import axios from 'axios';

   class ClientService{
   createClient(client){

    return axios.post(`http://localhost:8080/clientscheklist/`, client);

  }
   }

  export default new ClientService()

please add the exception u r getting. it works in postman and not on the web because CORS is a browser property — royB, May 28 '20 at 15:32
@royB thats what i get on my console when hitting the signup button "Access to XMLHttpRequest at 'http://localhost:8080/clientscheklist/' from origin 'http://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." — Fayçal Mekdour, May 28 '20 at 15:35
It is a [CORS](https://stackoverflow.com/q/5750696/2873538) issue. You need to set correct headers at the backend. Or read [Proxying API Requests in Development](https://create-react-app.dev/docs/proxying-api-requests-in-development/) — Ajeet Shah, May 28 '20 at 15:57
@AjeetShah I'm allowing all kind of headers but im still getting the error, i did add the proxy attribute in json package but still not working — Fayçal Mekdour, May 28 '20 at 16:52

GM-atteoni · Answer 1 · 2020-05-28T15:37:19.033

Here are some things you can try.

First of all, at your createClient function, call a console.log with JSON stringify like that:

createClient(client){

console.log(JSON.stringify(client));

return axios.post(`http://localhost:8080/clientscheklist/`, client);

}

With that, go to your postman and change the type of body (since it is a POST) to "raw". Input your JSON that have been logged into your console and give it a try.

If it doesn't works, review that JSON and you should find the error.

If it works, you should try some headers like that in your axios post:

const headers = {
 'Content-Type': 'application/json'
}
  axios.post(API_URL, data, {
  headers: headers
})

CORS Policy Error only in reactjs when submitting a post request and working in postman

1 Answers1