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