:::success
**問題**：TypeError: Cannot read properties of undefined (reading 'cstNode')

**解決**：更正swagger文件縮排錯誤
:::

:::info
**問題**： POST http://localhost:5173/api/auth/register 404 (Not Found) 的錯誤訊息

**解決**：
因為 api-gateway 設定的 port 為 9000，
因此要在 /utils/axios.ts 中建立

const instance = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL, 
  timeout: 10000,                             // time exceed 10 sec
});

避免使用預設的 port 5137 ，
在/apis/admin/auth中需 `import axios from '../../utils/axios';`，若是使用 `import axios from 'axios';` 會載入預設模組使用預設設定
:::

:::success
**問題**：Access to XMLHttpRequest at ' http://localhost:9000/api/auth/register' from origin 'http://localhost: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. 的錯誤訊息

CORS (Cross-Origin Resource Sharing)：
一種安全機制，用於限制在網頁上的跨域請求，跨域請求是指從另一個源（Origin）發出的請求，例如從 https://api.example.com 發出到 https://example.com 的請求，可以看出這裡的主機名稱就不同了；或是從 http://localhost:3000 發送到 http://localhost:3001 也會是跨域請求，因為 Port 不同了。CORS 的重要性在於它允許瀏覽器強制執行同源策略（Same Origin Policy）。同源策略是一種安全措施，可防止惡意腳本訪問它不應該訪問的資源。

**解決**：用nginx反向代理解決，會為每個request、response加上header

:::

:::info
**問題**：register:1 Access to XMLHttpRequest at http://localhost:9000/api/auth/register from origin http://localhost: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.的錯誤訊息，意思是response沒有加上cors header因此被瀏覽器擋掉

**解決**：在/api-gateway/app.js中加上這段，為每個來自http://localhost:5173 中GET、POST等http請求都加上header

const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:5173',
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization']
}));

:::

:::success
**問題**：` const [orgActivitiesList, setOrgActivitiesList] = useState<activityInfoOutput[]>([]);`，useState非同步更新(要等到下一次render才會把值存到變數中)導致我無法在SROI計算那邊一載入畫面就顯示創建過的所有表單，因為我把資料從後端抓到前端時要再讓他render一次值才會被存到orgActivitiesList中，但我用useEffect不管怎麼設定都會變成無限迴圈

**解決**：改用store，這樣就不會有render的問題，以後如果要做公司表單列表的時候(eg 列出所有表單並可以編輯修改建立過的表單)也可以直接用
:::

:::info
**error**：
login:1 Access to XMLHttpRequest at 'http://localhost:9000/api/auth/login' from origin 'http://103.208.196.125:5173' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space loopback.
這個問題是因為Chrome 新增 Private Network Access (PNA) 限制，從 Chrome 94 開始，瀏覽器強化了安全規則：不允許「public 網頁 → private / loopback 網路」的請求

**解決**
只要把api-gateway的address改成用遠端機器對外的ip就可以了，所以將axios中的address格式改成`http://103.208.196.125:9000`就可以了

:::spoiler Vite vs Axios
Vite 負責建構與服務整個前端應用，有程式碼打包成瀏覽器可以解析的格式、proxy前端請求到後端...等功能
Axios 負責讓應用程式和後端伺服器溝通，可以發送post、get等等請求到後端取資料

=> vite負責把請求轉送到後端，由axios負責HTTP請求取資料
:::

:::success
**error**
前端錯誤 1:02:00 PM [vite] http proxy error at /api/auth/login:
Error: connect ETIMEDOUT 103.208.196.125:9000
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1611:16)
代表前端開發伺服器（Vite）想「代理（proxy）」你的 /api 請求給後端時，連不上遠端的 9000 port。

**解決**
直接用Nginx代理，不要用vite(因為vite只在開發有用)
:::