【問題解決】解決Angular客戶端請求Rest服務跨域問題

megatron 發布于2019-08-16 10:47 / 737人閱讀

摘要：問題描述通過是請求的服務，控制臺報錯如下，但是為。客戶端和服務端相同，但是端口不同，存在跨域問題。注解即是給響應頭增加了這兩個參數解決跨域問題。報錯如下查看響應碼，錯誤原因進一步查看請求頭信息，為。發送請求，請求成功。

1.問題描述：通過Origin是http://localhost:4200請求http://localhost:8081的服務，控制臺報錯如下，但是Response為200。客戶端和服務端IP相同，但是端口不同，存在跨域問題。

XMLHttpRequest cannot load http://localhost:8081/api/v1/staffs. No "Access-Control-Allow-Origin" header is present on the requested resource. Origin "http://localhost:4200" is therefore not allowed access.

2.解決方法：在服務端/api/v1/staffs的Restful方法增加@CrossOrigin注解，比如：

@CrossOrigin(origins = "*", maxAge = 3600)
@RequestMapping(value = "/api/v1/staffs", produces = { "application/json" }, method = RequestMethod.GET)
RestResponseList queryStaffs(@RequestParam(value = "limit", required = false, defaultValue = "20") int limit,
        @RequestParam(value = "offset", required = false, defaultValue = "0") int offset);

3.重新發送請求http://localhost:8081/api/v1/...，請求成功。且響應頭增加了Access-Control-Allow-Credentials和Access-Control-Allow-Origin參數。@CrossOrigin注解即是給響應頭增加了這兩個參數解決跨域問題。

4.在服務端POST方法同樣使用注解@CrossOrigin解決跨域問題。

@CrossOrigin(origins = "*", maxAge = 3600)
@RequestMapping(value = "/api/v1/staffs", produces = { "application/json" }, method = RequestMethod.POST)
RestResponse createStaff(@RequestBody RestRequest request);

報錯如下：

5.查看響應碼415，錯誤原因：

"status": 415,
"error": "Unsupported Media Type",
"exception": "org.springframework.web.HttpMediaTypeNotSupportedException",
"message": "Content type "text/plain;charset=UTF-8" not supported"

6.進一步查看請求頭信息，content-type為text/plain。與Response Headers的Content-Type:application/json;charset=UTF-8類型不匹配，故報錯。

7.指定請求頭content-type為application/json，比如在Angular中增加Headers。發送Post請求，請求成功。

let headers = new Headers({ "Content-Type": "application/json" });
let options = new RequestOptions({ headers });

return this.http.post(this.staffCreateURL, body, options).map((response: Response) => {
    //return this.http.get(this.userLoginURL).map((response:Response)=> {
    let responseInfo = response.json();
    console.log("====請求staffCreateURL成功并返回數據start===");
    console.log(responseInfo);
    console.log("====請求staffCreateURL成功并返回數據end===");
    let staffName = responseInfo.responseInfo.staffName;
    console.log(staffName);
    return responseInfo;
})

另：也可以在HttpServletResponse對象通過setHeader("Access-Control-Allow-Origin", "*")方法增加響應頭參數，解決跨域問題，即是@CrossOrigin注解方式。推薦使用注解，方便。

GPU云服務器云服務器 ajax請求跨域問題服務器問題解決問題解決解決問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/70460.html

angular中的跨域問題

摘要：要解決這個問題就需要跨域，本文介紹解決中的跨域的三種方式的原理是通過標簽發起一個請求來取代請求。使用規范簡單地擴展了標準的對象，以允許發送跨域的請求。預檢查可以讓服務器接受或拒絕來自全部服務器特定服務器或一組服務器的請求。首先，協議、主機名和端口號相同叫同源。同源策略允許頁面從同一個站點加載和執行特定的腳本。站外其他來源的腳本同頁面的交互則被嚴格限制。要解決這個問題就需要跨域，本文介...

tianlai 2019-08-20 17:52 評論0 收藏0
開始使用GraphQL

摘要：實踐由于是一種規范，它不是一種實現，如果要自己實現還是比較難的，不用擔心，強大的開源社區已經幫我們準備好了，這就是開源項目。然后執行這樣項目就啟動了，如下圖注這里存在跨域問題，所以服務器端需要使用解決跨域問題，具體看代碼。為什么要用graphql？讓我們先回顧一下我們現在所使用的API設計風格純rest：一個endpoint對應一個資源優點：靈活、解構缺點：由于一個endpoi...

UsherChen 2019-08-20 18:24 評論0 收藏0
前端基本功-常見概念(一)

摘要：前端基本功常見概念一點這里前端基本功常見概念二點這里前端基本功常見概念三點這里什么是原型鏈當一個引用類型繼承另一個引用類型的屬性和方法時候就會產生一個原型鏈。函數式編程是聲明式而不是命令式，并且應用程序狀態通過純函數流轉。前端基本功-常見概念(一) 點這里前端基本功-常見概念(二) 點這里前端基本功-常見概念(三) 點這里 1.什么是原型鏈當一個引用類型繼承另一個引用類型的屬性和方...

bladefury 2019-08-23 14:41 評論0 收藏0