資訊專欄INFORMATION COLUMN
摘要：問題描述通過是請求的服務(wù)，控制臺報錯如下，但是為。客戶端和服務(wù)端相同，但是端口不同，存在跨域問題。注解即是給響應(yīng)頭增加了這兩個參數(shù)解決跨域問題。報錯如下查看響應(yīng)碼，錯誤原因進一步查看請求頭信息，為。發(fā)送請求，請求成功。
1.問題描述：通過Origin是http://localhost:4200請求http://localhost:8081的服務(wù)，控制臺報錯如下，但是Response為200。客戶端和服務(wù)端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.解決方法：在服務(wù)端/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.重新發(fā)送請求http://localhost:8081/api/v1/...，請求成功。且響應(yīng)頭增加了Access-Control-Allow-Credentials和Access-Control-Allow-Origin參數(shù)。@CrossOrigin注解即是給響應(yīng)頭增加了這兩個參數(shù)解決跨域問題。
4.在服務(wù)端POST方法同樣使用注解@CrossOrigin解決跨域問題。
@CrossOrigin(origins = "*", maxAge = 3600)
@RequestMapping(value = "/api/v1/staffs", produces = { "application/json" }, method = RequestMethod.POST)
RestResponse createStaff(@RequestBody RestRequest request);
報錯如下：
5.查看響應(yīng)碼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。發(fā)送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成功并返回數(shù)據(jù)start===");
console.log(responseInfo);
console.log("====請求staffCreateURL成功并返回數(shù)據(jù)end===");
let staffName = responseInfo.responseInfo.staffName;
console.log(staffName);
return responseInfo;
})
另：也可以在HttpServletResponse對象通過setHeader("Access-Control-Allow-Origin", "*")方法增加響應(yīng)頭參數(shù)，解決跨域問題，即是@CrossOrigin注解方式。推薦使用注解，方便。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/70460.html
摘要：要解決這個問題就需要跨域，本文介紹解決中的跨域的三種方式的原理是通過標簽發(fā)起一個請求來取代請求。使用規(guī)范簡單地擴展了標準的對象，以允許發(fā)送跨域的請求。預(yù)檢查可以讓服務(wù)器接受或拒絕來自全部服務(wù)器特定服務(wù)器或一組服務(wù)器的請求。 首先，協(xié)議、主機名和端口號相同叫同源。同源策略允許頁面從同一個站點加載和執(zhí)行特定的腳本。站外其他來源的腳本同頁面的交互則被嚴格限制。要解決這個問題就需要跨域，本文介...
摘要：實踐由于是一種規(guī)范，它不是一種實現(xiàn)，如果要自己實現(xiàn)還是比較難的，不用擔(dān)心，強大的開源社區(qū)已經(jīng)幫我們準備好了，這就是開源項目。然后執(zhí)行這樣項目就啟動了，如下圖注這里存在跨域問題，所以服務(wù)器端需要使用解決跨域問題，具體看代碼。 為什么要用graphql？ 讓我們先回顧一下我們現(xiàn)在所使用的API設(shè)計風(fēng)格 純rest：一個endpoint對應(yīng)一個資源 優(yōu)點：靈活、解構(gòu)缺點：由于一個endpoi...
摘要：前端基本功常見概念一點這里前端基本功常見概念二點這里前端基本功常見概念三點這里什么是原型鏈當一個引用類型繼承另一個引用類型的屬性和方法時候就會產(chǎn)生一個原型鏈。函數(shù)式編程是聲明式而不是命令式，并且應(yīng)用程序狀態(tài)通過純函數(shù)流轉(zhuǎn)。 前端基本功-常見概念(一) 點這里前端基本功-常見概念(二) 點這里前端基本功-常見概念(三) 點這里 1.什么是原型鏈 當一個引用類型繼承另一個引用類型的屬性和方...
閱讀 2860·2021-11-25 09:43
閱讀 2503·2021-10-09 09:44
閱讀 2817·2021-09-22 15:49
閱讀 2591·2021-09-01 11:43
閱讀 2557·2019-08-30 14:16
閱讀 478·2019-08-29 17:24
閱讀 3031·2019-08-29 14:00
閱讀 1396·2019-08-29 13:05
