Angular 2 - 请求的资源上不存在“Access-Control-Allow-Origin"标头 [英] Angular 2 - No 'Access-Control-Allow-Origin' header is present on the requested resource

问题描述

当尝试从我的 Angular 2 应用程序向我的 API 进行 API 调用时，我收到以下错误:

When trying to make API Calls from my Angular 2 App to my API, I get the following error:

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 相关的任何内容，但都没有解决我的问题！

I've been checking every single question on the web and anything releated to CORS, nothing solved my problem!

我的 Laravel API 在端口 80 上运行.(本地主机)

My Laravel API running on port 80. (localhost)

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

My angular 2 app running on port 3000. (localhost:3000)

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

• I've been trying to enable cors in Laravel side with Cors middleware
• The API calls are working using chrome web security off. The first answer here solves the problem, But I really want to stop using the CMD and unsecured chrome version everytime im testing my app.
• Using chrome extension POSTMAN API calls to my API are working.

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

So.. What's wrong? Why my Angular 2 app cant get records from my API?

推荐答案

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

Ok. seem like need to configure apache for it.

我正在使用 xampp 网络服务器，我必须按照 这里 解决这个问题.

i'm using xampp webserver, and I had to edit my httpd.conf as explained here to solve this.

添加了这一行:

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

解决了我的问题.

需要重启apache.

Restarting apache is neccessary.

这篇关于Angular 2 - 请求的资源上不存在“Access-Control-Allow-Origin"标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！