Angular 2 http服务中的访问控制允许来源问题

Posted

技术标签:

【中文标题】Angular 2 http服务中的访问控制允许来源问题【英文标题】:Access Control Allow Origin issue in Angular 2 http services 【发布时间】:2017-11-03 12:41:06 【问题描述】:

我遇到了从我的 laravel 服务器获取数据的问题。

这是客户端代码:

private surveysUrl = 
'http://107.170.59.79/services/public/api/v1/countries';
private headers = new Headers('Content-Type': 'application/json');

constructor(private http: Http)  

getSurveys(): Promise<Survey[]> 
return this.http.get(this.surveysUrl)
   .toPromise()
   .then(response => response.json() as Survey[])
   .catch(this.handleError);

但我收到的错误如下:

XMLHttpRequest 无法加载 链接设置在变量“surveysUrl”。 '访问控制- Allow-Origin' 标头的值 'Some random link' 不是 等于提供的原点。因此,原点 'http://localhost:4200' 是 不允许访问。

我该如何解决这个错误?

PS:我不能发布两个以上的链接,所以我不得不从错误消息中删除链接。我已将其替换为 以使其可读。

【问题讨论】:

How to make CORS-enabled HTTP requests in Angular 2?的可能重复 只有 49.248.126.222:8282 可以访问,您需要将其更改为允许您的本地主机,或者然后全部允许。这必须在服务器端完成,而不是您在下面询问的 Angular。 谢谢@AJT_82。我会做出改变。 【参考方案1】:

如果您使用的是 apache,那么您需要允许源访问,即

Header set Access-Control-Allow-Origin "*"

将其包含在 .htaccess 文件中。

【讨论】:

感谢您的建议,但请告诉我是否可以从 Angular 处理它。 嗨@RumSmeagolRun 这是要在服务器端完成的事情。 (即为您创建 API 端点的人)

以上是关于Angular 2 http服务中的访问控制允许来源问题的主要内容,如果未能解决你的问题,请参考以下文章

Angular 2 - 没有访问控制允许原始标头[重复]

访问控制不接受 Angular $resource 调用允许 Safari 与 Chrome 接受

没有“访问控制允许来源”Angular 4 应用程序

Angular $http 服务/控制器到 JSONP

没有访问控制允许 Origin IIS

Angular 2,没有“访问控制允许来源”