瀏覽器報`The value of the ‘Access-Control-Allow-Origin‘ header in the response must not be the wildcard

墨抒穎moshuying.top發表於2020-11-16
瀏覽器Header

歡迎訪問moshuying.top檢視更多資訊

詳細錯誤資訊 Access to XMLHttpRequest at 'http://localhost:7894/Login' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

前端 vue-antd-admin
後端 java servlet

前後端分離的專案中肯定會碰到跨域的問題，跨域的原因還是為了安全。最近在做一個專案的時候發現，即使我已經設定了跨域資訊，前端還是報這個跨域錯誤。

後來找了有經驗的後臺來幫忙也是弄了很久都沒有解決問題，後來我慢慢看請求頭和仔細尋找前後端的程式碼終於發現了端倪。

我專案中失敗的請求頭

DkcrSU.png

參考自MDN中失敗的一個請求頭

img

可以發現多了Authorization和Accept兩個請求頭，這兩個請求頭來自前端專案中的src/utils/request.js對請求經行了簡單的安全設定，使得請求中攜帶了安全資訊，檢視原始碼發現程式碼中設定了

axios.defaults.withCredentials= true

表示客戶端想要攜帶驗證資訊，這部分功能需要後臺支援，而後臺supportsCredentials一般被設定為false即不支援客戶端攜帶驗證資訊

對後臺程式碼進行修改

protected void doFilter(HttpServletRequest req, HttpServletResponse res, FilterChain chain) throws IOException, ServletException {
    res.addHeader("Access-Control-Allow-Origin", req.getHeader("Origin"));
    res.addHeader("Access-Control-Allow-Methods", "*");
    res.addHeader("Access-Control-Allow-Headers", "Accept,Authorization,DNT,Content-Type,Referer,User-Agent");
    res.addHeader("Access-Control-Allow-Credentials","true"); // 允許攜帶驗證資訊
    chain.doFilter(req, res);
}

問題解決

參考連結

mozilla的HTTP訪問控制
介紹了跨域中其他的頭資訊

相關文章