Angular POST request been blocked by CORS policy: Response to preflight request doesn't pass access control check

Question

I have already set cors on the backend, I just dont know why I am receiving 404 error when the url is correct. The error is Access to XMLHttpRequest at ' http://localhost:3008/api/vehicle ' from origin ' http://localhost:3007 ' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status. I have also added my api cross domain below. please check the sample code below.What would be the solution to this problem? what causes this issues?I have already set cors on the backend, I just dont know why I am receiving 404 error when the url is correct. The error is Access to XMLHttpRequest at ' http://localhost:3008/api/vehicle ' from origin ' http://localhost:3007 ' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status. I have also added my api cross domain below. please check the sample code below.What would be the solution to this problem? what causes this issues?

Any idea?

Http post service

save(vehicle: Vehicle){

    return this.http.post(

        CONSTANST.routes.person.save,
        {
            Stock: vehicle.Stock,
            VIN: vehicle.VIN,
            age: vehicle.age,
            gender: vehicle.gender,
        },                
    );
}

routes

const HOST ='http://localhost:3008'

export const CONSTANST = {
    permissions:{},
    routes:{
        authorization:{
            login: HOST + '/api/app/signin-email',
            logout: HOST + '/api/auth/logout'
        },
        person:{
            list: HOST + '/api/vehicle',
            save: HOST + '/api/vehicle',
        },
        user: {}
    },
    lang:{},
    session:{},
    parameters:{}
};

api cross domain request

if (process.env.NODE_ENV !== 'production') {
    console.log('------------------------------------------------');
    console.log('Notice: Enabling CORS for development.');
    console.log('------------------------------------------------');
    app.all('*', function (req, res, next) {
        res.header('Access-Control-Allow-Origin', '*');
        res.header('Access-Control-Allow-Methods', 'GET, POST');
        res.header('Access-Control-Allow-Headers', 'Content-Type');
        next();
    });
}

api routes

app.get('/api/vehicle',  keystone.middleware.api, routes.api.vehicle.list);
    app.post('/api/vehicle',  keystone.middleware.api ,routes.api.vehicle.create);

Answer 1

In your case url can be correct, but you have no configured handler for "OPTIONS" requests method in your api routes. It should be configured like you do it for GET or POST requests. And as result you receiving 404 response on your preflight requests.

app.options('/api/vehicle',  keystone.middleware.api ,routes.api.vehicle.create);

But you do not need pass there your callback with logic because you will execute your logic twice.

In addition i can advice you to do one options handler for all your routes:

app.options('*', someSimpleCallback);

Answer 2

In my case I was missing a trailing slash after the id of object I wanted to delete.

If you're using Django Rest Framework for backend, ensure that you've set the ALLOWED_HOSTS . You may also want to use django-cors-headers app.