在 Angular2 中使用 RabbitMQ RESTful 服务答案

【问题标题】：Using RabbitMQ RESTful services with Angular2在 Angular2 中使用 RabbitMQ RESTful 服务
【发布时间】：2017-07-20 00:44:04
【问题描述】：

我目前正在开发一个项目，我需要访问连接到确定的 Rabbitmq 的所有队列。为此，我试图使用 rabbitmq 的 RESTful 服务来获取这些信息。我尝试使用 POSTman 做一些示例，例如使用 guest:guest 作为用户名和密码向 localhost:15672/api/connections 发送请求，一切正常；但是，当我尝试在 Angular 上使用我的项目发送相同的请求时，出现以下错误消息：

zone.js:2177 XMLHttpRequest 无法加载 localhost:15672/api/overview。跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https。

我对这个错误进行了一些研究，我能找到的所有解决方案都建议我应该允许 Chrome 上的浏览器发出 CORS 请求，但是这个解决方案需要我更改每个运行我的项目的浏览器，这将无效。有人知道我可以使用 Angular 2 应用程序获取 Rabbitmq 信息的另一种方式吗？

提前致谢！

编辑：

另外，如果我在请求的开头添加“http://”，错误消息会变为：

XMLHttpRequest 无法加载 http://localhost:15672/api/overview。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://localhost:4200' 不允许访问。响应的 HTTP 状态代码为 405。

我的代码如下所示：

@Injectable()
export class RabbitHttp {

protected headers: Headers;

constructor(private http: Http, private router: Router,
    public globalService: GlobalService
) {
}
  public get(url: string, parameters: any): Promise<Response> {
    url = "http://" + url;
    this.setDefaultHeaders(parameters, url);
    return this.http.get(url, { headers: this.headers }).toPromise();
};
private setDefaultHeaders(data: any,  url: string): void {
    this.headers = new Headers();
    this.headers.append("Content-Type", "application/json");
    this.headers.append("Authorization", "Basic " + data);
    this.headers.append("Access-Control-Allow-Origin", url);
}
}

rabbit 服务通过它的 6 个默认插件启动，您可以使用命令启用

rabbitmq-plugins 启用 rabbitmq_management

关于url和参数，函数中接收到的url是localhost:15672/api/overview，参数是guest:guest

【问题讨论】：

标签： angular rest typescript rabbitmq

【解决方案1】：

您可以在this code 中看到，当请求包含Origin 标头（match_origin 函数）时，将返回 CORS 标头。

您使用 Angular 创建的请求必须包含 Origin 标头。

【讨论】：

它确实包含，我的应用程序的标题定义如下：this.headers = new Headers(); this.headers.append("Access-Control-Allow-Origin", url); this.headers.append("Content-Type", "application/json"); this.headers.append("授权", "基础" + 数据);
标头必须命名为“Origin” - github.com/rabbitmq/rabbitmq-management/blob/master/src/… 如果您可以提供重现此问题的代码，修复它会更快。我只能猜测你做错了什么。
谢谢 =)，刚刚用我当前使用的代码编辑了我的原始帖子。
改变这个：this.headers.append("Access-Control-Allow-Origin", url);对此：this.headers.append("Origin", url);
@FilipeTabosa - 如果我的回答是正确的，请将此问题标记为已回答。如果它不起作用，请提供一套完整的代码，我可以用来重现您的问题并修复它。