Search code examples
node.jsgoogle-chromeaxioscorscrud

Axios DELETE method blocked by CORS policy. What am I missing?


I know this has been asked a thousand times. I've went through each one of the answers and nothing seems to work, or I'm not asking the right questions.

I'm doing a small full-stack project. My backend is Node and Express running in port:8000. The relevant part (I think) is this:

AppDataSource.initialize()
.then(()=>{

    ...
    const app = express()

    app.use(express.json())
    app.use(cookieParser())
    app.use(cors({
        allowedHeaders: ['Content-Type', 'Authorization'],
        credentials: true,
        origin: ['localhost:3000'],
        methods: ['GET', 'POST', 'PUT', 'DELETE']
    }))

    ...
})

The front, running on localhost:3000, is ReactJS and uses axios. The relevant code is this one:

const deleteUser = async (id: number) => {
        if (window.confirm('Are you sure you want to delete this record?')){

            try {
                await axios.delete(`users/${id}`)
                setUsers(users.filter((u: UserType) => {
                    return u.id !== id
                }))
            }catch(e){
                console.log(e)
            }           
        }
    }

The backend delete:

export const DeleteUser = async (req: Request, res: Response) => {
    const id = parseInt(req.params.id)
    const repository =  AppDataSource.getRepository(User)
    const user = await repository.findOneBy({id})

    if (!user) {
        res.status(404).send({
            message: "No user found"
        })
    } else {
        await repository.delete(id)
        
        res.status(204).send({
            message: "User deleted"
        })
    }
}

In Chrome I get this:

CORS blocking request

enter image description here

I may add that I have Access-Control-Allow-Origin addon installed and active in Chrome, and Postman App has no issues DELETing records at all.

Any help?

enter image description here


Solution

  • I switched browser to FireFox, installed a CORS add-on and it worked. Doesn't solve the issue, but it does show the problem is Chrome.