Angular 2 - 请求的资源上不存在“Access-Control-Allow-Origin”标头答案

【问题标题】：Angular 2 - No 'Access-Control-Allow-Origin' header is present on the requested resourceAngular 2 - 请求的资源上不存在“Access-Control-Allow-Origin”标头
【发布时间】：2016-08-17 22:48:16
【问题描述】：

当尝试从我的 Angular 2 应用程序向我的 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 上运行。（本地主机）

我的 angular 2 应用程序在端口 3000 上运行。(localhost:3000)

我一直在尝试使用 Cors 中间件在 Laravel 端启用 cors
API 调用工作在关闭 chrome 网络安全的情况下。第一个答案here 解决了问题，但我真的很想在每次测试我的应用程序时停止使用 CMD 和不安全的 chrome 版本。
使用 chrome 扩展 POSTMAN API 调用我的 API 正常工作。

所以.. 怎么了？为什么我的 Angular 2 应用无法从我的 API 获取记录？

【问题讨论】：

您的服务器 CORS 配置不正确。从您提供的信息中很难提供更多信息。
@GünterZöchbauer 您需要什么信息？当您说服务器时，您的意思是 API 或 apache（我使用的是 xampp Web 服务器）
您的服务器 CORS 配置。这个问题与 Angular 无关。
当您说服务器时，您的意思是 API 或 apache 本身（我使用的是 xampp Web 服务器）？
你是对的@GünterZöchbauer，我自己配置了我的服务器，现在一切正常。谢谢

标签： laravel angular cors

【解决方案1】：

我一直在尝试使用 Cors 中间件在 Laravel 端启用 cors

您是否注册了路由来处理OPTIONS 请求？

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

【讨论】：

【解决方案2】：

好的。似乎需要为它配置apache。

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

添加了这一行：

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

解决了我的问题。

需要重启apache。

【讨论】：

我正在使用 ubuntu 那么如何解决这个问题。我希望你能帮助我谢谢
不错，但查找文件需要时间，但最后我明白了：therichpost.com/question/…

【解决方案3】：

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

在Headers->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 添加到响应头中。

【讨论】：

【解决方案4】：

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

【讨论】：