Ionic 2/Angular 2/CORS：HTTP頭沒有被請求發送

我正在使用Ionic 2（2.0.0-beta.10）的項目。我嘗試將請求傳遞給授權令牌。但是頭沒有被髮送。我試圖傳遞的其他標題也沒有被髮送。Ionic 2/Angular 2/CORS：HTTP頭沒有被請求發送

let url = 'http://www.example.com/savedata'; 
let data = JSON.stringify({ email: '[email protected]', password: '123456' }); 

let headers = new Headers(); 

headers.append('Content-Type', 'application/json'); 
headers.append('Authorization', 'Bearer ' + "tokenContent"); 

let options = new RequestOptions({ headers: headers }); 

this.http.post(url, data, options).map(res => res.json()).subscribe(data => { 

       console.log("it worked"); 

}, error => { 
       console.log("Oooops!"); 
});

我的REST API接收到這個請求，有以下標題：

Host:    www.example.com 
Connection:   keep-alive 
Access-Control-Request-Method: POST  
Origin:    http://evil.com/  
User-Agent:   Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36 
Access-Control-Request-Headers: authorization, content-type 
Accept:    */* 
Referer:   http://localhost:8100/?restart=794567 
Accept-Encoding:  gzip, deflate, sdch 
Accept-Language:  en-US,en;q=0.8

的數據（體）進來正確的，只是標題問題，我解決不了。任何幫助將不勝感激。

來源

2016-08-04 GwenTiana

你可以嘗試傳遞這樣的'this.http.post（url，data，{headers：headers}）這樣的頭文件....' – AngJobs

我試圖做到這一點，但是我在REST API中收到的頭文件發送請求如下：主機\t \t www.example.com連接 \t保活\t 的Content-Length \t \t 45原產 \t \t http://evil.com/ 用戶代理\t的Mozilla/5.0（ Windows NT 6.1; WOW64）AppleWebKit/537.36（KHTML，如Gecko）Chrome/51.0.2704.106 Safari/537.36 \t Content-Type \t text/plain \t Accept \t */* \t Referer \t http：// localhost：8100 /？重啓= 794567 \t 接受編碼gzip的\t，縮小\t 接受語言\t EN-US，EN; Q = 0.8 – GwenTiana

正常，檢查這個答案http://stackoverflow.com/questions/38301878/ionic-2-angular -2-http-headers-are-not-being-along-with-the-request – AngJobs

如果您在調用與您的Angular 2/Ionic應用程序（例如evil.com）不同的域中的REST API（您的示例中是example.com），則需要將REST API服務器配置爲返回這個頭：

Access-Control-Allow-Origin: http://evil.com

，這將使瀏覽器從主機evil.com發送異步HTTP請求到REST API服務器。

這是通過啓用其餘api服務器上的CORS來完成的，您可以多讀一下它。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

的後端幾個庫，從而實現跨起源請求：

https://github.com/expressjs/cors - 的NodeJS /快速

https://pypi.python.org/pypi/Flask-Cors/ - Python的CORS庫瓶

和列表持續近任何其他後端框架。

來源

2016-09-14 21:35:39

將JSON這個字符串化並非真的在任何時候工作。首先，您需要將您的JSON數據轉換爲StringQuery，以便通過服務器以更快的方式正確理解。

public StringQuery(jsonString) { 
     return Object.keys(jsonString).map(function (key) { 
      return encodeURIComponent(key) + '=' + encodeURIComponent(jsonString[key]); 
     }).join('&'); 
     }

然後你讓你的文章函數或方法

public post(){ 
let url = 'http://www.example.com/savedata'; 
let data = this.StringQuery({ email: '[email protected]', password: '123456' }) 




    let headers = new Headers(); 

    headers.append('Content-Type', 'application/x-www-form-urlencoded'); 
    headers.append('Authorization', 'Bearer ' + "tokenContent"); 

    let options = new RequestOptions({ headers: headers }); 

    this.http.post(url, data, options).map(res => res.json()).subscribe(data => { 

        console.log("it worked"); 

    }, error => { 
        console.log("Oooops!"); 
    }); 
}

我使用此代碼太並獲得成功後請求。

來源

2017-08-04 00:56:51

Ionic 2/Angular 2/CORS：HTTP頭沒有被請求發送

回答

相關問題