Help me solve this CORS Policy Issue - React App

JavaScript
1

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.

2

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
3

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/