在Angular2 HTTP POST中設置JSON請求標頭

Question

我在發布請求中設置application / json標頭的內容類型時遇到問題。

    saveUpdates(alltabs: AllTabs): Observable<Response> {
            let api = this.host + this.routes.save;
            let headers = new Headers();
            headers.append('Content-Type', 'application/json');

            return this._http.post(api, JSON.stringify(alltabs), { headers: headers })
            .map((response: Response) => <Response>response.json())
            .do(data => console.log("saveUpdates(): " + data))
            .catch(this.handleError);
    }

請求標頭：

OPTIONS /api/productsave HTTP/1.1
Host: wbtest:92
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: POST
Origin: http://localhost:3000
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.84 Safari/537.36
Access-Control-Request-Headers: content-type
Accept: */*
Referer: http://localhost:3000/product/60000010080
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8

響應標題：

HTTP/1.1 405 Method Not Allowed
Cache-Control: no-cache
Pragma: no-cache
Allow: POST
Content-Type: application/json; charset=utf-8
Expires: -1
Server: Microsoft-IIS/7.5
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Access-Control-Allow-Origin: *
Date: Tue, 14 Jun 2016 15:16:15 GMT
Content-Length: 76

如您所見，我的請求有兩個意外的標頭，分別是“ Access-Control-Request-Headers”和“ Access-Control-Request-Method”。 這似乎表明CORS（跨源資源共享）存在問題。 但是，API服務器上的web.conf文件一直在工作，並且響應標頭指出“ Access-Control-Allow-Origin：*”。

知道有什么問題嗎？

更新：

上面的代碼是正確的-問題在於服務器代碼未配置為處理預檢請求。 就我而言，.NET Web API 2應用程序未配置為允許CORS。

Answer 1

使用CORS，您有兩種請求。 實際上，CORS規范區分了兩種不同的用例：

• 簡單的要求 。 如果我們使用HTTP GET，HEAD和POST方法，則此用例適用。 對於POST方法，僅支持具有以下值的內容類型： text/plain ， application/x-www-form-urlencoded和multipart/form-data 。
• 事前要求 。 當“簡單請求”用例不適用時，將發出第一個請求（使用HTTP OPTIONS方法）以檢查在跨域請求的上下文中可以執行的操作。

您的服務器似乎未配置為支持預檢請求。 405狀態碼的原因（不允許使用405方法）。

請參閱本文以獲取更多詳細信息：

• http://restlet.com/blog/2015/12/15/understanding-and-using-cors/