Question

当我尝试从我的Angular 2 App到我的API进行API调用时，出现以下错误：

XMLHttpRequest cannot load http://localhost/myAPI/public/api/v1/auth/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 422.

我一直在检查网络上的每一个问题以及任何与CORS相关的问题，没有解决我的问题！

我的 Laravel API 在端口80上运行。（localhost）

我的 angular 2 app 在端口3000上运行。（localhost：3000）

我一直在尝试使用Cors中间件启用Laravel方面的角色
使用chrome web security off关闭API调用正常工作。第一个答案here解决了这个问题，但我真的想在每次测试我的应用时停止使用CMD和不安全的chrome版本。
使用chrome扩展程序对我的API的POSTMAN API调用正在运行。

那么......出了什么问题？为什么我的Angular 2应用程序无法从我的API获取记录？

Answer 1

确定。似乎需要为它配置apache。

我正在使用xampp webserver，我必须按照here的说明编辑我的httpd.conf来解决这个问题。

添加了这一行：

Header set Access-Control-Allow-Origin "http://localhost:3000"

解决了我的问题。

需要重新启动apache。

Answer 2

打开chrome检查工具，切换到Network标签并检查Angular2发送的请求。

在Headers - ＆gt; Response Headers中，检查是否Access-Control-Allow-Origin:*（我打赌不是）

如果您正在构建API，最简单的解决方法是添加

if (Request::is("api/*")) {
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization, If-Modified-Since, Cache-Control, Pragma");
}

在routes.php的开头，使用中间件是一种更好的方法，但要确保它正常工作并将Access-Control-Allow-Origin添加到响应标头。

Answer 3

//Add this middleware in your express app
app.use(function (req, res, next) {
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.header('access-Control-Allow-Origin', '*');
next();
});

Answer 4

我一直在尝试使用Cors中间件启用Laravel方面的角色

您是否已注册处理OPTIONS请求的路由？

如果您只是将中间件添加到现有GET和POST路由，并且浏览器发出OPTIONS请求，则永远不会访问中间件。

Angular 2 - No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源

4 个答案: