我已經構建了一個通常在開發中運行的反應應用程式，但是當我構建它時，前端獲取請求不使用我在 package.json 檔案中指定的代理。
獲取請求：
export const verifyUser = async (user) => {
console.log(user);
const newData = await fetch("/login", {
method: "POST",
body: JSON.stringify({ name: user.username, password: user.password }),
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
}).then((res) => res.json());
return newData;
};
包.json：
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"proxy": "http://host.docker.internal:8080",
"dependencies": {
"@craco/craco": "^6.4.3",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.1.1",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@tailwindcss/postcss7-compat": "^2.2.17",
"autoprefixer": "^9.8.8",
"postcss": "^7.0.39",
"postcss-cli": "^9.1.0",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
}
}
ui Dockerfile：
# build environment
FROM node:14.18.1 as build
WORKDIR /app
COPY package*.json ./
COPY . .
RUN npm ci
RUN npm run build
# production environment
FROM nginx:1.21.4-alpine
COPY --from=build /app/build /usr/share/nginx/html
COPY --from=build /app/nginx/nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD [ "nginx","-g", "daemon off;"]
碼頭工人組成：
version: "3"
services:
api:
build: ./api
ports:
- "8080:8080"
depends_on:
- mongo
ui:
build: ./my-app
ports:
- "80:80"
depends_on:
- api
mongo:
image: mongo
ports:
- "27017:27017"
我試過把完整的地址放在 fetch 呼叫中，但它在 nginx.config 中不起作用：
server {
listen 80;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
}
uj5u.com熱心網友回復：
您需要讓 Nginx 將呼叫您的 API 傳遞到您的 API 容器。一種常見的方法是在所有 API 請求前加上 /api/，這樣你的 /login 端點就變成了 /api/login。
如果您將 nginx.conf 更改為
server {
listen 80;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
location /api/ {
proxy_pass http://api:8080/;
}
}
然后它會傳遞請求。這意味著您還需要將 fetch 呼叫更改為
const newData = await fetch("/api/login", {
由于您始終通過 nginx 容器訪問 api 容器，因此無需將 api 容器埠映射到主機上的埠，您可以在 docker-compose 檔案中將其洗掉
api:
build: ./api
depends_on:
- mongo
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/387572.html