Angular $ http.delete CORS错误（预检请求） [英] Angular $http.delete CORS error (preflight request)

问题描述

我有一个Angular应用程序（v1.13.15）和Express.js（v4.12.4）作为后端。

我在后端有一个DELETE方法，我已经启用CORS支持它。

但是，当我使用Angular $ http.delete，我遇到这个错误

$ b $

我尝试过使用Jquery， $ .ajax（）调用它，我得到同样的问题！

我也尝试使用POSTMAN做一个DELETE请求，没有问题。 >

但是，我没有访问使用我的Angular的GET和POST方法。

我可以知道什么是这个问题？

我的后端网址

当为DELETE执行CORS时，它首先会向服务器发送一个OPTIONS方法，然后它将解析为DELETE方法

因此，在后端，我应该有OPTIONS的路由，然后调用next（）将其传递给DELETE方法

代码：

  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（）; 
} 
  

POSTMAN能够执行DELETE请求吗？ （这是因为它向我的服务器发送一个DELETE http请求，而不是OPTIONS），而在Web浏览器中，它将发送一个OPTIONS预检请求（这主要是为了安全考虑）

* shoutout到@FrankerZ，他让我比较POSTMAN和我的Chrome结果，然后我看到访问控制允许方法，这导致我尝试cors中间件（https://www.npmjs.com/package/cors ），它工作，然后我设法固定的问题，是由于预检请求！

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

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

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

No 'Access-Control-Allow-Origin' header is present on the requested resource.

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

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

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

May I know what is this problem?

My backend URL http://localhost:3000

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

My server 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');
}

and my Angular 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);
                });

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

Below is the screenshot from Postman,

解决方案

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

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

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

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

Backend code:

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

and my router middleware

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

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)

*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!

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