CORS策略已阻止角度POST请求：对飞行前请求的响应未通过访问控制检查

Question

我已经在后端设置了cors，我只是不知道为什么我收到404错误，当网址是正确的。错误是访问XMLHttpRequest在'http://localhost:3008/api/vehicle'从源'http://localhost:3007'已被阻止CORS策略：响应飞行前请求不通过权限改造检查：它没有HTTP确定状态。我还在下面添加了我的api跨域。请检查下面的示例代码。这个问题的解决办法是什么？是什么导致了这个问题？我已经在后端设置了cors，我只是不知道为什么我收到404错误，当网址是正确的。错误是在'http://localhost:3008/api/vehicle'访问来自来源'http://localhost:3007'已被CORS策略阻止：对预飞行请求的响应不通过权限改造检查：它没有HTTP确定状态。我还在下面添加了我的api跨域。请检查下面的示例代码。这个问题的解决办法是什么？是什么导致了这个问题？

有什么想法吗？

save(vehicle: Vehicle){

    return this.http.post(

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

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:{}
};

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

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

Answer 1

在我的例子中，我想删除的对象的id后面缺少一个尾随斜杠。

如果使用Django Rest Framework作为后端，请确保已设置ALLOWED_HOSTS。您可能还想使用django-cors-Headers应用程序。

Answer 2

在你的例子中，url可能是正确的，但是你在api路由中没有为“选项”请求方法配置处理程序。它应该像您为GET或POST请求所做的那样进行配置。因此，您收到404对飞行前请求的回复。

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

但是你不需要用逻辑传递你的回调，因为你会执行你的逻辑两次。

此外，我可以建议您为所有路线做一个选项处理程序：

app.options('*', someSimpleCallback);