getServerSideProps中的nextjs axios请求在使用nginx部署后总是返回404。
getServerSideProps中的nextjs axios请求在使用nginx部署后总是返回404。
提问于 2022-01-11 13:46:58
我在带有nodejs后端的ec2实例上运行了nextjs应用程序
当应用程序在useEffect中发出axios请求时，它工作得非常完美，但是当应用程序从getServersideProps函数内部发送请求时，它会失败，并且它的状态代码为404，并且请求根本不会到达后端。
这是nginx文件
server {
server_name frontend.domain.com;
location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Port $server_port;
# we need to remove this 404 handling
# because of Next's error handling and _next folder
# try_files $uri $uri/ =404;
}
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/frontend.com/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/frontend.com/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot}
server {
server_name api.domain.com;
location / {
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_cache_bypass $http_upgrade;
proxy_pass http://localhost:8080;
}
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/frontend.com/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/frontend.com/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}这是axios配置：
const configModified = {
baseURL: 'https://api.domain.com',
withCredentials: true,
headers:{},
adapter: cache.adapter
// global customizations
}
export const request = (request) => {
const source = axios.CancelToken.source();
return {
request: axios({ ...configModified, ...request}, cancelToken: source.token }),
source
}
}它正在按预期在localhost上工作，但是在部署之后，请求只在getServerSideProps函数中失败。
回答 1
Stack Overflow用户
发布于 2022-01-18 01:11:16
您必须基于服务器或客户机上的axios实例来修改axios实例。
export default ({ req }) => {
if (typeof window === "undefined") {
// We are on the server
return axios.create({
baseURL:
"http://ingress-nginx-controller.ingress-nginx.svc.cluster.local",
headers: req.headers,
});
} else {
// We must be on the browser
return axios.create({
baseUrl: "https://api.domain.com",
// if it causes error
// baseUrl: "/"
});
}
};然后当您在服务器上时，传递上下文对象。
export const getServerSideProps = async (context) => {
const client = buildClient(context);
...
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70667884
复制相关文章
相似问题
腾讯云开发者
