Help me solve this CORS Policy Issue - React App

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.

If you’re running your own server in the same project and trying to access your own API, you could try this if your client side is create-react-app.

1 Like

There is a way to change proxy server, but in my case it didn’t work. In the end I solved the error and wrote article about it. Come check it out and don’t ever worry again because of that. :slight_smile:
royalcode.eu/en/cross-origin-cors-error-and-access-control-allow-origin-header/