使用HttpClient与Angular 2进行预检CORS(带标题的GET请求)

时间:2018-09-24 07:33:18

标签: angular cors httpclient preflight

我正在尝试捕获有关REST API的信息。为此,我创建了一个Angular 6项目(使用Apache2在Ubuntu服务器上托管),并使用HttpClient进行GET请求,直到我在标头中传递了基本授权。

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote ressource at http://jira.mydomain.com/rest/plugins/1.0/ (Reason: CORS preflight channel did not succeed)
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote ressource at http://jira.mydomain.com/rest/plugins/1.0/ (Reason: CORS request did not succeed)

我遇到了飞行前cors错误。

app.component.ts

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*',
    'Authorization': 'Basic ' + btoa('xxx:xxx')
  })
};
this.httpService.getHttp('https://jira.mydomain.com/rest/plugins/1.0/', httpOptions)
  .subscribe(jsonPlugins => {
    this.filterPlugins(jsonPlugins);
    this.setPluginsLastestVersion();
  });

http.service.ts

getHttp(url: string, httpOptions: {}) {
  return this.http.get(url, httpOptions);
}  

编辑:我在apache2上的虚拟主机是

<Directory /var/www/html/jiraupdate>
                Options Indexes FollowSymLinks MultiViews
                AllowOverride All
                Order allow,deny
                allow from all
                Header set Access-Control-Allow-Origin "*"
        </Directory>

我完全迷路了。我的标题似乎不错。.

如果有人可以帮助我

祝你有美好的一天

1 个答案:

答案 0 :(得分:0)

我相信jira.mydomain.com没有设置正确的标题。因此,浏览器不允许您从客户端应用程序中获取数据。

您需要获取数据服务器端并创建一个自定义终结点,在其中指定所有正确的标头-最重要的是

Access-Control-Allow-Origin should be set to *

然后您可以从客户端应用程序调用端点,并返回从jira收到的数据。

希望有帮助。