Help me solve this CORS Policy Issue - React App

#javascript #react

I'm trying to delete a user by id from server, accessing the api with axios http client on react app and receiving this message in developer/ console ->

Access to XMLHttpRequest at 'host:8082/user/delete/6' from origin '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.

Here's my code -

import React from "react"
import axios from "axios"

export default class PersonList extends React.Component {
  state = {
    id: "",
  }

  handleChange = event => {
    this.setState({ id: event.target.value })
  }

  handleSubmit = event => {
    event.preventDefault()

    axios
      .delete(`http://host:8082/user/delete/${this.state.id}`)
      .then(res => {
        console.log(res)
        console.log(res.data)
      })
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit} crossOrigin="anonymous">
          <label>
            User ID:
            <input type="text" name="id" onChange={this.handleChange} />
          </label>
          <button type="submit">Delete</button>
        </form>
      </div>
    )
  }
}

Please help me to resolve this cors issue.

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More