如果有人可以幫助我或為我的問題指明正確的方向，我將不勝感激。
該應用程式在本地主機上運行良好，但是當我部署到 AWS 時，所有子頁面的 Axios 請求 URL 格式都錯誤。我的 Nginx 配置或 React 應用程式 Axios 基本 URL 設定一定有問題，但不太確定應該如何設定。
API 端點和客戶端 baseurl 在http://app3.dev100.xyz上運行良好，但每個子頁面 Axios API 請求的請求 URL 格式錯誤，請參見下面的示例。
例如，如果我以某種方式單擊產品頁面，所有 Axios API 請求都會在 URL 的中間獲得“產品”。
錯誤：http://app3.dev100.xyz/products/api/products/3/related
正確：http://app3.dev100.xyz/api/products/3/related
如果有任何區別，客戶端路由是使用 react-router 歷史記錄完成的。
React axios baseurl 開發和部署的生產設定
// Development (works fine localhost)
axios.defaults.baseURL = 'http://localhost:5000/api';
// Deployment (works only for the main domain but not for subpages as explained above)
axios.defaults.baseURL = 'api';
// Original conditional setup was done like this
axios.defaults.baseURL = process.env.NODE_ENV === 'prodcution' ? "api/" : 'http://localhost:5000/api';
Nginx 設定。客戶端和 API 托管在同一臺服務器上
server {
listen 80;
listen [::]:80;
root /home/ubuntu/apps/ecom-app/client/build;
# Add index.php to the list if you are using PHP
index index.html index.htm;
server_name app3.dev100.xyz;
location / {
try_files $uri /index.html;
}
location /api/ {
proxy_pass http://localhost:5000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
uj5u.com熱心網友回復：
'api'我更改了 Axios baseURL 以包含從to的域名'https://app3.dev100.xyz/api'，這似乎有效。
我沒有開發客戶端應用程式，所以不確定僅使用“api”作為 Axios baseURL 的最初想法是什么。雖然我見過其他人這樣使用它，但不確定他們如何讓它作業以及 Axios 如何格式化 URL。
我將 Axios 請求和 React 路由設定留在這里，僅供參考。
<Route exact path='/products/:id' component={Product} />
history.push({ pathname: `/products/${slug}`, state: { productId: id } });
axios.get(`/products/${productId}`)
使用 baseURL 'api'Axios 格式化子頁面的 URL，如下所示：
'http://app3.dev100.xyz/products/api/products/1'
使用 baseURL 'https://app3.dev100.xyz/api'
Axios 正確格式化子頁面的 url
'http://app3.dev100.xyz/api/products/1'
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/511193.html