Angular 2：在预检响应中 Access-Control-Allow-Methods 不允许方法 DELETE答案

【问题标题】：Angular 2: Method DELETE is not allowed by Access-Control-Allow-Methods in preflight responseAngular 2：在预检响应中 Access-Control-Allow-Methods 不允许方法 DELETE
【发布时间】：2017-07-02 06:18:35
【问题描述】：

我需要使用 mongoose 删除我的 mongodb 上的一条记录。

这是我的组件

 deleteProduct(product){
        this._confirmationService.confirm({
            message: 'Are you sure you want to delete the item?',
            accept: () => {
                this._productsAdminService.deleteProduct(product._id)
                    .subscribe(products => {
                        products.forEach(function(product){
                            if(product.cat_id === 1) product.catName = 'Dota Shirts';
                            if(product.cat_id === 2) product.catName = 'Gym Shirts';
                            if(product.cat_id === 3) product.catName = 'Car Shirts';
                        });
                        this.products = products;
                    },
                    err => console.log(err));
            }
        })
    }

基本上这只会将产品 ID 传递给服务以执行 http 请求。

这是我的服务

deleteProduct(productId){
    let headers = new Headers({'Authorization': 'JWT ' + localStorage.getItem('currentUserToken')});
    let options = new RequestOptions({ headers: headers});
    return this._http.delete('http://localhost:3000/admin/products/delete/' + productId, options)
        .map((response: Response) => response.json())
        .catch(this._handlerError);
}

我正在使用 delete 方法在 expressJS 中调用我的 API。

这是我的 API

productsAdminRouter.route('/delete/:productId')
    .delete(function(req,res){
        id = req.params.productId;
        console.log(id);
        Products.findByIdAndRemove(id)
            .exec(function(err, done){
                if (err) throw err;
                Products.find()
                    .exec(function(err, products){
                        res.json(products);
                    });
            });
    });

但我总是遇到这个错误

有人可以帮忙吗？我被卡住了。

【问题讨论】：

标签： mongodb angular express mongoose

【解决方案1】：

前几天我在使用 Java-Spring 后端时遇到了同样的问题：当发生跨域资源共享（或简称为 cors）时，Angular 发送了一个pre-flight 请求之前类型为OPTIONS(http) 的实际（此处删除）请求。

你要做的是：

在您的服务器上启用 CORS
确保您的服务器接受该特定端点上的 OPTIONS 请求 (/delete/:productId)
将Access-Control-Allow-Methods 标头添加到OPTIONS 的响应中，删除

【讨论】：

您能教我如何以及在何处将 access-control-allow-method 标头放在我的代码中吗？我现在有授权标头，但我不知道如何放置访问控制。顺便说一句，我已经启用了 cors
尝试 res.header("Access-Control-Allow-Headers", "Authorization, Origin, X-Requested-With, Content-Type, Accept"); res.header("Access-Control-Allow-Methods", "PATCH, POST, GET, PUT, DELETE, OPTIONS"); if ('OPTIONS' === req.method) { return res.send(200); }

【解决方案2】：

就像@flashjpr 所说的那样

我必须为我的实体“票证”编写一个特定的中间件。

var allowDelete = function(req, res, next){
  res.append('Access-Control-Allow-Methods', 'DELETE')
  next()
}

并将其传递给该实体的第一个中间件

app.use('/tickets', allowDelete, tickets);

编辑：我使用的是expressjs。

【讨论】：