Vite使用Axios傳CSRF token 出現CORS ERROR(更新解決方案)

vue3 axios vite

yi850102 2023-04-17 13:53:21 ‧ 1623 瀏覽

分享至

export const apiRequest = axios.create({
  baseURL: import.meta.env.VITE_APP_AXIOS_BASEURL,
  withCredentials: true,
  headers: {
    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
  }
})
export const apiCheckPermission = (data) => apiRequest.post('/checkPermission', data)

const getToken = async () => {
  await apiGetToken.get('/getCSRFToken').then((res) => {
    document.querySelector('meta[name="csrf-token"]').content = res.data
    loginSet._token = res.data
    sessionStorage.setItem('token', res.data)
  })
}

const checkPermission = async () => {
  const formData = new FormData()
  Object.keys(loginSet).forEach((e) => {
    formData.append(e, loginSet[e])
  })
  try {
    await getToken()
    const data = await apiCheckPermission(formData)
    if (data.data.result === true) {
      router.push({
        name: 'overView'
      })
    } else {
      img.value = data.data.captcha.img
      userData.captcha_key = data.data.captcha.key
      sessionStorage.setItem('captcha_key', userData.captcha_key)
    }
  } catch (err) {
    console.log(err)
  }
}

Vite 版本^4.1.4+Vue3
後端版本laravel 9+nginx

目前在專案登入頁需要先執行getToken Function取得CSRF Token，
但是取得CSRF Token之後，執行checkPermission Function，卻一直出現
Acess to XMLHttpRequest at 'http://www.domain.com/api/checkPermission' from origin 'http://127.0.0.1:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Access-Control-Allow-Origin這個問題有請後端工程師加入"*" 進行處理
然後再postman 以及舊專案使用AJAX進行測試都沒有問題。

有上網找尋其他解法，都是針對Headers 加入'X-Requested-with': 'XMLHttpRequest',或者更改'Content-Type'，但是似乎都沒有效果。
再請大大們給小弟建議了

剛剛經過測試已經在後端laravel
bootstrap\app.php
增加
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: *');
header('Access-Control-Allow-Headers: *');
以解決問題

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

pblaten

iT邦新手 2 級 ‧ 2023-04-17 16:19:42

在你的apiRequest中有設定withCredentials為true。
可以參考這個網站，有更多的解釋，結論是：

Credential is not supported if the CORS header 'Access-Control-Allow-Origin' is '*'

當在withCredentials = true時，要在後端增加 Access-Control-Allow-Origin，且要指定域名，而不能使用'*'。

而在同域的狀況下，withCredentials是true或是false，效果都相同。

回應 3
分享
檢舉

yi850102 iT邦新手 5 級 ‧ 2023-04-17 16:38:14 檢舉

剛剛有請後端工程師設定，以及我把這個參數刪除，都沒有辦法解決。

pblaten iT邦新手 2 級 ‧ 2023-04-17 16:40:07 檢舉

試試看後端維持'*'，前端刪掉這個參數。

yi850102 iT邦新手 5 級 ‧ 2023-04-17 16:43:55 檢舉

也試過了，還是一樣。

登入發表回應

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2023-04-18 00:06:13

我是在後端這樣處理的

$setHost = request()->server('HTTP_REFERER');
return $response->header('Access-Control-Allow-Origin', $setHost)
                ->header('Access-Control-Allow-Methods', '*')
                ->header('Access-Control-Allow-Headers', 'Origin, Methods, Content-Type, Authorization')
                ->header('Access-Control-Allow-Credentials', true);

再將其放到 Middleware 。
然後AJAX請求的路由都會包這個 Middleware 去做處理。