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/user/delete/6& from origin 'http://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.
Biplab Malakar
Senior Software Engineer, JavaScript Developer, MEAN Developer, Node.js Developer, MERN Developer, Hybrid Mobile App Developer and ML Develo
its not the issue of your frontend, its the issue of backend If your backend written in backend, then install npm cors
npm i corsconst cors = require('cors'); app.use(cors())If your server based on specific domain origin, then you need to configure cors with the domain
app.use(cors({ origin: 'localhost', credentials: true }));For more you can visit CORS Github issue