iT邦幫忙

2025 iThome 鐵人賽

DAY 26
0
生成式 AI

30 天與 AI 同事打造系統的求生實錄系列 第 26

【Day 26】前端登入遇阻:跨域與依賴衝突的雙重挑戰

  • 分享至 

  • xImage
  •  

鐵人賽第26天
原本想繼續先完成網頁介面,但發現登入功能沒串接好,我無法看到其他頁面。
所以我請AI同事先將註冊與登入頁面功能串接。

由於我之前後端API路由是 /v1/xxx/ooo
所以前端這也要修改成新的路由位置。
接著登入頁面又跳出下面錯誤:

Access to XMLHttpRequest at 'http://localhost:13000/v1/auth/token' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

看來是CORS (Cross-Origin Resource Sharing) 問題,看起來是為了安全所設立的機制必須同個來源才能互相呼叫。
我猜可能是我前端之前是本地端執行,但後端在容器。
我將前後端都在容器執行後在試一次。
但在建構前端容器時出現vue-tsc 找不到的問題,我請AI同事去處理這個問題。
結果他找了半天找不到問題,後來我翻了一下才發現他根本沒在package.json加入,難怪在架構容器時找不到。

加入之後又出現版本衝突問題,我請AI同事呼叫context7去查找,但沒找到正確的版本。
嘗試了幾個方法:

  • 修改 Dockerfile 使用 npx
  • 使用claudeAI提供的穩定版本組合

都無法解決問題。

看來這個問題稍微棘手,請了幾個不同AI都無法解決,不過今天時間有限,明天會多花一點時間來處理這一塊跟建置新的頁面。


上一篇
【Day 25】前端細節處理:逐步調整元件大小與樣式
下一篇
【Day 27】AI 同事的版本陷阱:容器與本地端的衝突解決實錄
系列文
30 天與 AI 同事打造系統的求生實錄30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言