角 POST 请求被 CORS 策略阻止：对预检请求的响应未通过访问控制检查

Posted 2023-02-27

【中文标题】角 POST 请求被 CORS 策略阻止：对预检请求的响应未通过访问控制检查

【英文标题】：Angular POST request been blocked by CORS policy: Response to preflight request doesn't pass access control check

【发布时间】：2020-01-23 05:52:34

【问题描述】：

我已经在后端设置了 cors，我只是不知道为什么我在 url 正确时收到 404 错误。错误是访问来自源“http://localhost:3007”的“http://localhost:3008/api/vehicle”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：它没有 HTTP ok 状态。我还在下面添加了我的 api 跨域。请检查下面的示例代码。这个问题的解决方案是什么？是什么导致了这个问题？我已经在后端设置了 cors，我只是不知道为什么我在 url 正确时收到 404 错误。错误是从源“http://localhost:3007”访问 XMLHttpRequest 在“http://localhost:3008/api/vehicle”已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：它没有 HTTP ok 状态。我还在下面添加了我的 api 跨域。请检查下面的示例代码。这个问题的解决方案是什么？是什么导致了这个问题？

有什么想法吗？

Http 发布服务

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

api跨域请求

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 路由

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

【问题讨论】：

UI和API的端口不同。因此它将被浏览器安全阻止。 API 必须发送值为 * 或 http://localhost:3007 的 Access-Control-Allow-Origin 标头以绕过此

请在此处显示您的后端 cors 配置...

我建议在开发过程中使用 Angular 代理配置（github.com/angular/angular-cli/blob/master/docs/documentation/…）而不是使用完整 URL 直接 API 调用。添加代理后，您无需添加主机，如HOST +

那么解决方案是什么？

@ArifKhan，直接用完整的URL调用api有什么坏处？

【参考方案1】：

在您的情况下，url 可能是正确的，但您的 api 路由中没有为“OPTIONS”请求方法配置处理程序。应该像为 GET 或 POST 请求那样配置它。因此，您在预检请求中收到 404 响应。

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

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

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

app.options('*', someSimpleCallback);

【讨论】：

#Slovy 先生，我有一个问题

是服务器端的问题还是客户端的问题？

服务器端。您正在发送 GET 请求以接收车辆列表和 POST 请求以创建此列表。但是，在您的每个请求之前，浏览器都会在此 url 上发送 OPTIONS 请求，以检查在这些 url 上发送跨域请求的权限。因此，您应该在服务端配置 OPTIONS 请求处理程序：app.options('/api/vehicle', keystone.middleware.api ,routes.api.vehicle.create);

【参考方案2】：

在我的情况下，我想删除的对象的 id 后面缺少一个斜杠。

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