react+nextjs配置跨域不生效

【相关推荐】

• 这篇博客: react项目配置proxy中的 使用http-proxy-middleware 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  1.安装http-proxy-middleware

  yarn add http-proxy-middleware

  或

  npm i -S http-proxy-middleware

  2.在src目下新建文件setupProxy.js，并进行如下配置

  const { createProxyMiddleware } = require("http-proxy-middleware");
  module.exports = function (app) {
  	app.use(
  		"/api",
  		createProxyMiddleware({
  			target: "http://127.0.0.1:3000",
  			changeOrigin: true,
  			pathRewrite: {
  				"/api": "",
  			},
  		})
      );
      // 更多代理配置...
  };

  ps：

  这里很多博主说使用如下配置：

  app.use(proxy('/api', { 
      target: 'http://127.0.0.1:3000',
      secure: false,
      changeOrigin: true,
      pathRewrite: {
       "^/api": "/"
      },
     }));

  我一开始也是这样配置，最近发现报错了proxy is not a function，后发现是http-proxy-middleware版本影响

  0.x.x版本的引用方式

  const proxy = require('http-proxy-middleware');

  1.0.0版本的引用方式

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

   

该回答引用自GPT-3.5,由博主GISer Liu编写：

针对你提出的问题描述，首先需要明确的是你使用的技术栈包括React 17、Next.js 12以及semi-design
2.53.2，并且你希望在这个项目中通过http-proxy-middleware实现跨域配置，但是配置并没有生效。
在React应用中使用http-proxy-middleware是一种常见的方式来解决跨域请求的问题。通常情况下，这个问题可以通过配置setupProxy.js文件来解决，但是你遇到了配置不生效的情况。
针对这个问题，我会给出以下解决思路和解决方案：

解决思路：

1. 确认配置文件位置： 确保setupProxy.js文件位于正确的位置，并且在项目中能够被正确加载。
2. 检查是否正确安装http-proxy-middleware： 确保你已经正确安装了http-proxy-middleware包。
3. 检查配置是否正确： 确保setupProxy.js文件中的配置项正确设置，特别是目标地址（target）是否正确设置。
4. 检查是否存在其他配置冲突： 某些情况下，可能存在其他配置与setupProxy.js中的配置冲突，需要确保这些配置没有影响到代理的设置。
5. 查看控制台输出： 在启动项目时，查看控制台输出是否有关于代理配置的提示或错误信息，以便进一步排查问题。

   解决方案：

6. 确认setupProxy.js文件位置： 确保setupProxy.js文件位于项目的根目录下，并且没有其他文件名拼写错误或位置错误。
7. 检查http-proxy-middleware包是否正确安装： 使用以下命令确保http-proxy-middleware包已经正确安装：
   bashCopy code

   npm install http-proxy-middleware
   

8. 配置setupProxy.js文件： 确保setupProxy.js文件中的配置正确，示例如下：
   javascriptCopy code

   const { createProxyMiddleware } = require('http-proxy-middleware');
   module.exports = function(app) {
   app.use(
   '/api',
   createProxyMiddleware({
   target: 'http://example.com', // 这里修改为你的目标地址
   changeOrigin: true,
   })
   );
   };
   

9. 检查其他配置项： 如果项目中存在其他跨域或代理相关的配置文件，确保它们没有影响到setupProxy.js的配置。
10. 查看控制台输出： 在启动项目时，查看控制台输出，检查是否有关于代理配置的提示或错误信息，根据输出进一步排查问题。
    通过以上步骤，你应该能够解决React Next.js项目中http-proxy-middleware配置跨域不生效的问题。如果问题仍然存在，可以进一步检查项目中的其他配置项或尝试使用其他解决方案来实现跨域请求。

如果该回答解决了您的问题，请采纳！如果没有，请参考以下方案进行修订