Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: 按照文档设置proxy无效,npm run dev 一直接口404 #1975

Open
shengwong233 opened this issue Dec 5, 2023 · 1 comment
Open

Comments

@shengwong233
Copy link

shengwong233 commented Dec 5, 2023

Version

2.2.13

OS Version

windows 11

Node.js Version

16.20.0

Browser Version

Microsoft Edge 115.0.1901.200

Link to minimal reproduction

Steps to reproduce

直接把文档里面关于proxy设置的代码复制到本地.dumirc.ts中:
`
import { defineConfig } from 'dumi';

export default defineConfig(() => {
return {
outputPath: 'docs-dist',
themeConfig: {
name: 'decore-ui',
nav: [
{ title: '介绍', link: '/guide' },
{ title: '组件', link: '/components/Foo' },
],
logo: '/images/logo.jpg',
showLineNum: true,
footer: Copyright © ${new Date().getFullYear()} <a href="xxxxx" target="_blank" rel="noopener noreferrer">xxxx</a>,
},
apiParser: {},
resolve: {
// 配置入口文件路径,API 解析将从这里开始
entryFile: './src/index.ts',
},
clickToComponent: {},
codeSplitting: {
jsStrategy: 'granularChunks',
},
favicons: ['/images/logo.jpg'],
proxy: {
'/api': {
'target': 'http://jsonplaceholder.typicode.com/',
'changeOrigin': true,
'pathRewrite': { '^/api' : '' },
}
}
};
});
然后启动,组件中:
useEffect(() => {
axios({
method: 'get',
url: '/api/users',
}).then((res) => {
console.log(res);
});
}, []);
`
直接404

What is expected?

正常返回接口请求的信息

What is actually happening?

直接报404

Any additional comments? (optional)

No response

@mkos11
Copy link

mkos11 commented Dec 11, 2023

您遇到的问题看起来可能与设置代理有关,以及在运行npm run dev时遇到404错误(可能是HTTP 404 Not Found)。这可能是由于代理配置不正确或代理服务器无法正确转发请求引起的。

以下是一些建议来解决这个问题:

1. 检查代理设置:

确保您的代理设置正确。您可以在项目的配置文件(通常是webpack配置文件或项目根目录下的.env文件)中设置代理。例如,在Vue.js项目中,可以在vue.config.js文件中设置代理:

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://your-api-server',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

请根据您的项目和服务器配置进行相应调整。

2. 检查代理服务器状态:

确保您的代理服务器正在运行,并且没有任何问题。您可以尝试直接访问代理服务器的地址,看看是否可以成功连接。

3. 检查API服务器地址:

确保target字段指向正确的API服务器地址。如果您的API服务器地址是http://localhost:3000,那么target应该设置为这个地址。

4. 查看404错误详细信息:

检查浏览器开发者工具(通常按下F12键并切换到Network选项卡)中关于404错误的详细信息。这可能会提供有关为何请求未找到的更多信息。

5. Path Rewrite设置:

在代理配置中,pathRewrite字段用于重写请求路径。确保它正确配置,以便正确映射到您的API路径。

6. 重新安装依赖和重启:

有时候,依赖关系可能有问题,您可以尝试重新安装依赖并重新启动项目:

npm install
npm run dev

7. 确保API服务器正常运行:

确保您的API服务器正在运行,并且端口号等配置正确。如果API服务器无法正常工作,前端项目将无法正确访问接口。

通过检查这些方面,您可能能够解决这个问题。如果问题仍然存在,请提供更多关于项目结构、代理配置和错误详细信息的信息,以便我可以提供更具体的帮助。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants