寫了Access-Control-Allow-Origin,還報跨域錯誤解決過程

如果出現,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錯誤。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章