Ошибка политики CORS только в reactjs при отправке почтового запроса и работе в почтальоне - PullRequest
Новая
       1

Ошибка политики CORS только в reactjs при отправке почтового запроса и работе в почтальоне

0 голосов
/ 28 мая 2020

У меня возникает ошибка «... был заблокирован политикой CORS» при попытке использовать сообщение о методе в моем reactjs интерфейсе, хотя я включил аннотацию @CrossOrigin в бэкэнде весенней загрузки, и хотя при тестировании запроса на почтальоне он работает отлично, проблема в интерфейсе, и я не нашел никакого полезного решения

Вот мой класс сущности: 

@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;
}
}

Мой класс контроллера 

@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);
}   
}

Интерфейс моего репозитория: 

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

Внешний интерфейс

Мой класс регистрации: 

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;

Мой класс обслуживания: 

   import axios from 'axios';

   class ClientService{
   createClient(client){

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

  }
   }

  export default new ClientService()

1 Ответ

0 голосов
/ 28 мая 2020

Вот некоторые вещи, которые вы можете попробовать.

Прежде всего, в вашей функции createClient вызовите console.log с JSON stringify следующим образом: 

createClient(client){

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

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

}

С этим go на ваш почтальон и измените тип тела (так как это POST) в "raw". Введите свой JSON, который был зарегистрирован в вашей консоли, и попробуйте.

Если не работает, просмотрите JSON, и вы должны найти ошибку.

Если это работает, вы должны попробовать несколько таких заголовков в своем сообщении ax ios: 

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