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);

the port of UI and the API is different. So it will be blocked by browser security. The API has to send Access-Control-Allow-Origin header with value of * or http://localhost:3007 to bypass this — Nithin Kumar Biliya
I would like to recommend to use Angular proxy config( github.com/angular/angular-cli/blob/master/docs/documentation/… ) instead of direct API call using complete URL during the development. Once you added proxy, you do not need to add host like HOST + — Arif Khan
@ArifKhan , what is the disadvantage of directly calling api using complete URL ? — user11327631

SlovyanskiyYehor SlovyanskiyYehor · Accepted Answer · 2019-09-23T10:29:51

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);