Angular2 Firebase：预检响应具有无效的 HTTP 状态代码 405答案

【问题标题】：Angular2 Firebase : Response for preflight has invalid HTTP status code 405Angular2 Firebase：预检响应具有无效的 HTTP 状态代码 405
【发布时间】：2018-05-02 05:21:14
【问题描述】：

我是 Angular2 的新手。尝试从 Firebase API 获取值时，出现以下错误：

OPTIONS https://udemy-ng-http.firebaseio.com/data 405 (Method Not Allowed)

Failed to load https://udemy-ng-http.firebaseio.com/data: Response for preflight has 

invalid HTTP status code 405

但我可以将数据发布到 Firebase API Endpoint。

我还尝试了该社区提供的其他解决方案，但没有帮助。下面是我的代码。

代码：

 getServer(){
    let headers = new Headers();
    headers.append('Access-Control-Allow-Headers', 'Content-Type');
    headers.append('Access-Control-Allow-Origin', '*');
    headers.append('Content-Type', 'application/json') ;
    headers.append('charset','UTF-8');
    headers.append('Accept','application/json');
    let options = new RequestOptions({ headers: headers });

    return this.http.get('https://udemy-ng-http.firebaseio.com/data',options)
        .map(
            (response: Response) => {
                const data = response.json();
                for (const server of data) {
                  server.name = 'FETCHED_' + server.name;
                }
                return data;
            }
        )
        .catch(
            (error: Response) => {
              return Observable.throw('Something went wrong');
            }
        );
}

【问题讨论】：

Firebase 应用 udemy-ng-http.firebaseio.com/data 是您创建的吗？还是udemy给的东西？
它是由 udemy 提供的.. 没关系。我可以发布数据，但无法使用 get。我尝试创建自己的 firebase 端点，但也没有用。请帮忙

标签： angular firebase angular2-services

【解决方案1】：

您需要将 .json 添加到您的端点。尝试点击https://udemy-ng-http.firebaseio.com/data.json。它给出了 404。您可以尝试点击您创建的那个。请看看我创建的 plunk。

https://plnkr.co/edit/ZTZ9QXsDWRlvboPh2OEu?p=preview

let _url = 'https://irelief-3ff8d.firebaseio.com/bookings.json';
    //https://udemy-ng-http.firebaseio.com/data
     this.http.get(_url, { headers: headers }).subscribe((response)=>{
      alert('response >> '+JSON.stringify(response));
      this.responseData = response;
    },err => alert('status : '+err.status)));

您需要将网址替换为您自己的应用。希望这可以帮助。

附：我在这个例子中使用 Angular 版本 4.4.6。

【讨论】：

【解决方案2】：

尝试删除headers.append('Access-Control-Allow-Origin', '*');

Firebase 团队提供了两个 sample functions 来演示 CORS 的使用：

第二个示例使用与您当前使用的不同的方式处理 cors。

另外，请考虑像这样导入，如示例中所示：

const cors = require('cors')({origin: true});

【讨论】：