角$ http.delete CORS错误（preflight要求） [英] Angular $http.delete CORS error (preflight request)

问题描述

我有一个角应用（v1.13.15）和Ex press.js（v4.12.4）作为后端。

I have an Angular app (v1.13.15) and Express.js(v4.12.4) as backend.

我在后台一个DELETE方法，我已经启用了CORS对它的支持。

I have a DELETE method in my backend, and I have enabled CORS support for it.

但是，当我用角$ http.delete，我碰到这个错误

But, when I use Angular $http.delete, I run into this error

否访问控制允许来源标头的请求的资源present。

我已经使用jQuery $阿贾克斯（）调用它试图，我也得到了同样的问题！

I have tried using Jquery, $.ajax() call for it, and I get the same problem!

我使用邮递员做一个DELETE请求也试过，也没有问题。

I also tried using POSTMAN to do a DELETE request and there is no problem.

不过，我必须用我为我的GET和POST方法访问角没有问题的。

But, I have no problem accessing using my Angular for my GET and POST method..

我想知道这是什么问题呢？

May I know what is this problem?

我的后端网址
的http：//本地主机：3000

我服使用一饮而尽，网络服务器我AngularJS
的http：//本地主机：8000

I serving my AngularJS using gulp-webserver http://localhost:8000

我的服务器code

exports.deleteGPSData = (req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.header('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

let id = req.params.id;

res.send('here');
}

和我的角code

$http.delete(API_URL + '/gps/' + id)
                .success(function(res) {
                    if (res.result !== 1) {
                        return defer.reject(new Error(id + ' failed to delete'));
                    }

                    defer.resolve(res.id);
                })
                .error(function(status) {
                    defer.reject(status);
                });

我都没有问题GET和POST方法！只有当我使用DELETE方法，我跑进CORS错误！

I have no problem with GET and POST method! only when I use DELETE method, I ran into CORS errors!

我附上下面的截图使用谷歌浏览器

I have attached a screenshot below for the request header using Google Chrome

下面是邮差的截图中，

推荐答案

我设法解决这个问题，这是由于preflight要求

I managed to solve this problem, it is due to preflight request

https://developer.mozilla.org/en-US/文档/网络/ HTTP / Access_control_CORS

在做CORS为DELETE，它会先发送一个OPTIONS方法到服务器，然后将它解析为DELETE方法

When doing CORS for DELETE, it will first send an OPTIONS method to the server, and then it will resolve to DELETE method

因此​​，它在后台，我应该有选项的路线，然后调用next（）来传递它给删除方法

So it in backend, I should have route for OPTIONS and then call next() to pass it to DELETE method

后端code：

app.options('/gps/:id', routes.gps.optionGPSData);
app.delete('/gps/:id', routes.gps.deleteGPSData);

和我的路由器中间件

exports.optionGPSData = (req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'DELETE');
res.header('Access-Control-Allow-Headers', 'X-Requested-With,Content-Type');

next();
}

邮递员能够执行DELETE请求？ （这是因为它发送一个DELETE HTTP请求到我的服务器，而不是期权），而在Web浏览器中，它会发送一个选项preflight请求（这主要是为了安全考虑）

POSTMAN is able to perform a DELETE request? (this is because it sends a DELETE http request to my server, and not OPTIONS) whereas in web browser, it will send an OPTIONS for preflight request (this is mainly for security concern)

*大喊答题节目环节以@FrankerZ，他enlights我比较邮递员，我的Chrome结果，然后我看到有访问控制的不同方法允许，这使我尝试CORS中间件（的 https://www.npmjs.com/package/cors ），和它的作品，然后我设法让这个问题，是由于到preflight要求！

*shoutout to @FrankerZ, he enlights me to compare POSTMAN and my Chrome result, and then I see there is a difference in Access Control Allow Method, which leads me to try cors middleware (https://www.npmjs.com/package/cors), and it works and then I managed to pin the problem and is due to the preflight request!

这篇关于角$ http.delete CORS错误（preflight要求）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！