Question

即使我在ly spring引导后端启用了@CrossOrigin注释，即使在测试时也尝试在我的reactjs前端中使用方法发布时出现“ ...已被CORS策略阻止”错误邮递员的要求非常有效，问题出在前端，我还没有找到任何有用的解决方案

这是我的实体类：

@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()

Answer 1

您可以尝试以下方法。

首先，在您的createClient函数上，使用JSON stringify这样调用console.log：

createClient(client){

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

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

}

这样，转到邮递员并将正文类型（因为它是POST）更改为“ raw”。输入已登录到控制台的JSON，然后尝试一下。

如果它不起作用，请查看该JSON，您应该会发现错误。

如果有效，则应尝试在axios帖子中尝试一些类似的标题：

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

提交发布请求并在邮递员中工作时，仅在reactjs中出现CORS政策错误

1 个答案: