react+nextjs配置跨域不生效

Question

react17+nextjs12+semi-design2.53.2项目中 下载http-proxy-middleware 配置跨域文件setupProxy不生效

Answer 1

引自免费微信小程序：皆我百晓生

针对在React.js（版本17）和Next.js（版本12）项目中使用semi-design（版本2.53.2）时配置跨域不生效的问题，你提到已下载并尝试通过http-proxy-middleware设置setupProxy.js文件进行代理。为确保proxy中间件正确配置，请按照以下步骤检查或更新你的setupProxy.js文件：

// 在项目根目录下创建或修改 setupProxy.js 文件

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  // 配置目标API服务器的URL和要代理的路径
  const targetUrl = 'http://your-api-server-url.com'; // 替换为目标API地址
  const apiProxyPath = '/api'; // 这是你希望拦截并转发到目标服务器的请求路径前缀

  app.use(apiProxyPath, 
    createProxyMiddleware({
      target: targetUrl,
      changeOrigin: true, // 允许跨域
      pathRewrite: {
        '^' + apiProxyPath: '' // 移除请求路径中的/api前缀
      },
      secure: false // 如果API服务器是HTTP而不是HTTPS，需要设置此项为false
    })
  );
};

确保上述代码在项目的根目录下的setupProxy.js文件内，并且该文件会被Next.js自动识别和加载。

如果你的目标API接口与上面的示例不同，请相应地调整targetUrl和apiProxyPath。同时，请确保在前端代码中发起API请求时，请求路径是以配置的apiProxyPath作为前缀的。

如果问题依然存在，请检查以下可能原因：

1. 确保setupProxy.js文件被正确引用和执行，Next.js在开发环境下会自动处理此文件。
2. 检查前端应用发送请求时的URL是否符合预期，即包含/api这样的前缀。
3. 如果目标API服务器有CORS限制，请确保API服务器端允许来自你前端应用的域名或端口访问。

若以上方案仍无法解决，请提供更多关于请求失败的具体错误信息以及API服务器的CORS设置情况。