CORS response when sending a DELETE request-CodePudding

I am trying to send a DELETE request to my backend server, but I keep getting this response printed to my console:

Response {type: 'cors', url: 'http://localhost:3003/delete', redirected: false, status: 200, ok: true, …}
body: (...)
bodyUsed: false
headers: Headers {}
ok: true
redirected: false
status: 200
statusText: "OK"
type: "cors"
url: "http://localhost:3003/delete"
[[Prototype]]: Response

I don't know why this is happening.

server.js

const express = require('express')
const knex = require('knex')
const cors = require('cors')



const db = knex({
    client: 'pg',
    connection: {
        host: '127.0.0.1',
        user: 'postgres',
        password: 'psql',
        database: 'blogspot',
        port: 5432
    }
});

const app = express();

app.use(express.json())
app.use(cors())


// Delete Blog
app.delete('/delete', (req, res) => {
    const {id} = req.body;
    db.select('*').from('blogs')
    .where({
        id: id
    })
    .del()
    .then(() => {
        res.json('Deleted Successfully')
    })
    .catch(err => res.status(404).json('An error occured'))
})

fetchAPI.js

function deleteBlog (blog) {
        fetch('http://localhost:3003/delete', {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(blog)
        }).then(resp => {
            console.log(resp)
            if (resp === 'Deleted Successfully') {
                navigate(0)
            } else if (resp === 'An error occured') {
                console.log('Something went wrong')
            } else {
                console.log('ERROR')
            }
           
        })
    }

I keep getting 'ERROR' printed to my console along with the cors response I pasted above. When I refresh, I find that the blog has been deleted, but the response was definitely an error since navigate(0) wasn't run and ERROR was printed to my console. I have tried removing the 'Content-Type': 'application/json' header and sending the id as request params instead but I got the same error.

CodePudding user response：

The fact that the response is of type "cors" just means that some contents are filtered by CORS policy (see https://developer.mozilla.org/en-US/docs/Web/API/Response/type) but you didn't get any error code, the statusCode is 200.

Since your response content type is JSON, you must also resolve the json parsing before reading the response:

function deleteBlog(blog) {
  fetch('http://localhost:3003/delete', {
      method: 'DELETE',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(blog)
    })
    .then(data => data.json())
    .then(resp => {
      // I also suppose that you will more likely find 
      // your "Deleted successfully" in the resp.body property, so :
      if (resp.body === 'Deleted Successfully') {
        navigate(0)
      } else if (resp.body === 'An error occured') {
        console.log('Something went wrong')
      } else {
        console.log('ERROR')
      }
    })
}