相关疑难解决方法(0)

所以我试图用 next/image 的组件显示图像。但是，图像并未显示。我相信这是因为 next/image 给了我一个 400 bad request 错误。

当我单击该 URL 时，它显示“请求的资源不是有效图像”，这很奇怪，因为从后端检索图像 url 后，我能够下载图像以查看它是有效图像，所以此错误是在将图像链接传递到组件的 props 中之后发生的。基本上，我的请求是正确的，但是 next/image 与图像 url 的交互被搞乱了。奇怪的是，几天前我也没有出现此错误，在没有更改任何内容后，我看到了此错误。

我已经像这样配置了 next.js 配置文件，并且对后端的请求确实检索了可下载的图像（next/image 只是没有正确显示）。

这是我的 next.js 配置文件：

const withPlugins = require('next-compose-plugins');
const withImages = require('next-images');

const nextConfig = {
  images: {
    domains: [
      'url.s3.amazonaws.com',
      'url.s3.amazonaws.com',
      'url.s3.amazonaws.com',
    ],
  },
  
};


module.exports = withPlugins([[withImages]], nextConfig);

对于生产部署，我们有一个由 3 台 Linux 机器组成的网络。其中两个用于部署，一个是 nginx 代理。对于开发部署，我们有一台单独的 Linux 机器。

在前端（这是一个 nextjs 框架）内部，设置了一个 http-proxy-middleware 用于解析浏览器的 cors 请求。这是http-proxy-middleware的代码：

import { API_URL } from "../../../config/";
import { createProxyMiddleware } from "http-proxy-middleware";

// Create proxy instance outside of request handler function to avoid unnecessary re-creation
const apiProxy = createProxyMiddleware({
  target: `${API_URL}`,
  changeOrigin: true,
  pathRewrite: { [`^/api/proxy`]: "" },
  secure: false,
});

export default function handler(req, res) {
  console.log(
    `Method: ${req.method} URL: ${req.url} Status Code: ${res.statusCode}`
  );
  apiProxy(req, res, (result) => {
    if (result instanceof …