我正在開發(fā)一個(gè)前端用作rest-api的客戶端。使用 Angular 6。問(wèn)題是當(dāng)我使用 HttpClient 發(fā)送 post 請(qǐng)求時(shí)，我收到了這個(gè)跨源錯(cuò)誤。我的代碼：服務(wù)：export class ApiConfigLogin { constructor(private http: HttpClient, private dataSrvc: DataService) {} private _url = this.dataSrvc.getMainUrl() + '/sec-login'; private options = { headers: new HttpHeaders().set('Content-Type', 'application/json') }; getResults(reqbody): Observable < ApiConfigLoginInterface > { console.log(this._url); return this.http.post < ApiConfigLoginInterface > (this._url, reqbody, this.options); } }組件.tsthis._ApiConfigLogin.getResults(body) .subscribe(data => { this.enableForms(); if (data.status === 401) { this.lowerMessage = data.message; } else { console.log(1); } });在 Mozilla Firefox 中：跨域請(qǐng)求被阻止：同源策略不允許讀取位于http://8888.8888.8888.8888:8888/address/sec-login的遠(yuǎn)程資源 。（原因：CORS 請(qǐng)求沒(méi)有成功）。在谷歌瀏覽器中：無(wú)法加載 http://8888.8888.8888.8888:8888/address/sec-login：預(yù)檢響應(yīng)無(wú)效（重定向）我已經(jīng)測(cè)試了允許對(duì)我的瀏覽器進(jìn)行控制擴(kuò)展。很高興知道我有一個(gè)內(nèi)容類型標(biāo)題：
2 回答
UYOU
TA貢獻(xiàn)1878條經(jīng)驗(yàn) 獲得超4個(gè)贊
有辦法繞過(guò)它；見(jiàn)這在GitHub上有關(guān)如何處理紹興德勝的客戶端：
JSONP
警告：這在每個(gè) API 上都是不允許的，并且在調(diào)用某些 API 時(shí)可能會(huì)中斷
您可以使用 JSONP 在生產(chǎn)中繞過(guò) CORS，它代表 JSON with Padding，也是一種“hack”。但它是一種廣泛使用的 hack，許多 API 都支持。您不是發(fā)送純 JSON 請(qǐng)求，而是將數(shù)據(jù)包裝在一個(gè)被評(píng)估的函數(shù)中。JSONP 在下面的鏈接中解釋：
或使用代理：
代理
警告：很棒的服務(wù)，但您依賴這些服務(wù)才能工作，如果它們損壞或出現(xiàn)故障，您的應(yīng)用程序也是如此
您可以使用代理您的請(qǐng)求并自動(dòng)為您啟用 CORS 的服務(wù)：
然后，您必須通過(guò)將這些 URL 之一添加到您的請(qǐng)求中來(lái)調(diào)用您的 API，例如：
梵蒂岡之花
TA貢獻(xiàn)1900條經(jīng)驗(yàn) 獲得超5個(gè)贊
當(dāng)您使用與用于加載 Web 應(yīng)用程序的 URL 不同的 URL 調(diào)用服務(wù)時(shí)，會(huì)發(fā)生 CORS 錯(cuò)誤，直到并包括端口。這是瀏覽器內(nèi)置的安全功能。
為了避免這種情況，您的服務(wù)器需要通過(guò)添加標(biāo)頭來(lái)允許跨域請(qǐng)求。您可以手動(dòng)添加標(biāo)題，這需要一些努力，或者，如果您使用的是 Spring 之類的東西，則會(huì)有一個(gè)注釋。
添加回答
舉報(bào)
0/150
提交
取消