如果出現,XXX屬性值爲null,而且前端報Access-Control-Allow-Origin
這樣的錯誤。
這種時候由於前端的報錯不像後端那樣具體明顯,可以快速的根據異常信息定位到那一行代碼發生的錯誤,讓人很頭疼,我在多次碰壁後總結了一下這個問題:
- 第一:首先
Access-Control-Allow-Origin
這個問題,第一個想到的應該是跨域問題是否解決,一般解決辦法是在你的應用中添加跨域組件(配置類),或者是加@CrossOrigin
註解解決。 - 第二:當然如果你使用了
nginx
做反向代理,那一定也要記得檢查一下nginx的config配置文件。 - 第三:如果已經解決了跨域問題,那就檢查後端接口是否正確,返回數據是否符合前端要求,而且要注意的是返回的數據屬性和前端接收的屬性是否要求一致(這裏很容易出現錯誤,但是很難發現,大小寫問題、符號問題等)。
檢查後端接口的工具:PostMan,Swagger
。 - 第四:前兩步沒有問題,那麼一定是前端在訪問接口時的
路徑、提交方式、提交參數
導致訪問不到接口,也會報出這樣的錯誤。一般方法是在js中打上斷點,採用debugger
的方式,一步一步的檢查方法調用過程中那些數據出現了問題,直到找到,或者直至採用console.log()
直接輸出數據信息來進行檢查,檢查哪裏爲null了,檢查那麼沒有調用到。
這裏分享我的一個比較坑的一個錯誤,以上四步我都檢查完畢,但是還是解決不了問題,最後發現,我的接口中用到的參數是HttpServletRequest
對象,這個對象容易獲得,所以不存參數問題,所以後端接口是可以直接訪問的,但是在這個接口中我用HttpServletRequest對象在獲取Cookie時出現了問題,因爲在前端setCookie沒有成功
,導致這裏一直沒有獲取到cookie,數據返回一直爲null,而訪問其他接口時又用到這個數據,導致其他接口出現如上Access-Control-Allow-Origin
錯誤。