angularjs Angular $http.删除CORS错误(飞行前请求)

mccptt67 于 2022-11-21 发布在 Angular

关注(0)|答案(5)|浏览(183)

我有一个Angular应用程序（v1.13.15）和Express.js（v4.12.4）作为后端。
我的后端有一个DELETE方法，并且我已经启用了对它的CORS支持。
但是，当我使用Angular $http.delete时，我遇到了这个错误

请求的资源上不存在“Access-Control-Allow-Origin”标头。

我试过使用Jquery，$. AJAX （）调用它，我得到了同样的问题！
我还尝试使用POSTMAN做一个DELETE请求，没有问题。
但是，我没有问题访问使用我的Angular 为我的GET和POST方法。
请问这是什么问题？
我的后端URL http://localhost:3000
我使用gulp-webserver http://localhost:8000服务我的AngularJS
我的服务器代码

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

和我的Angular 代码

$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方法没有问题！2只有当我用DELETE方法时，我遇到了CORS错误！
我在下面附上了使用Google Chrome的请求标题的屏幕截图

下面是来自Postman的截图，

angularjs

来源：https://stackoverflow.com/questions/30497413/angular-http-delete-cors-error-preflight-request

5条答案

按热度按时间

ppcbkaq51#

我设法解决了这个问题，这是由于飞行前的请求
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
当执行CORS for DELETE时，它将首先向服务器发送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用于预检请求（这主要是出于安全考虑）

向@FrankerZ大喊，他让我比较POSTMAN和我的Chrome结果，然后我发现访问控制允许方法有差异，这导致我尝试cors中间件（https://www.npmjs.com/package/cors），它工作正常，然后我设法解决了问题，这是由于预检请求！

赞(0）回复(0）举报 2022-11-21

fxnxkyjh2#

你可以使用cors npm模块来启用跨域请求
https://www.npmjs.com/package/cors

赞(0）回复(0）举报 2022-11-21

cqoc49vn3#

app.options('/gps/:id', function(req, res) { res.json({}) });
app.delete('/gps/:id', routes.gps.optionGPSData);

您可以定义自己的选项回调（不必相同）。

赞(0）回复(0）举报 2022-11-21

zvms9eto4#

预检请求仅发送标头而不发送标头值。因此，这会导致问题。
CORS需要从客户端和服务器端进行处理。
我在server.js文件中添加了以下标题设置（应用程序位于reactjs中）

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Request-Headers", "*");
  res.header('Access-Control-Allow-Methods', 'GET, POST, DELETE, OPTIONS');
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With,X-HTTP-Method-Override, Content-Type, Accept, Authorization");
  res.header("Access-Control-Allow-Credentials", "true");
  next();
});

从服务器端，我们也必须处理CORS请求。
以下是在服务器端API中完成的更改（应用程序在java jersey框架中）

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Request-Headers", "*");
  res.header('Access-Control-Allow-Methods', 'GET, POST, DELETE, OPTIONS');
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With,X-HTTP-Method-Override, Content-Type, Accept, Authorization");
  res.header("Access-Control-Allow-Credentials", "true");
  next();
});

只有当我们尝试从不同来源连接到本地主机时，才会出现此预检问题。

赞(0）回复(0）举报 2022-11-21

6yjfywim5#

至于我，我花了半天时间寻找一个合适的解决方案，为Angular / MangoDB组合，但失败了。所以，我找到了一个变通办法，通过使用谷歌扩展CORS-Unblock（解除封锁CORS错误，而开发或试验），它的工作就像一个魅力。希望它能帮助别人。

赞(0）回复(0）举报 2022-11-21