我的前端工程运行的端口是8080,现在后端接口调用的时候使用相对路径,但是后端接口是3000,怎么让后端服务正常工作
时间: 2024-04-13 21:28:46 浏览: 152
要让前端工程和后端服务能够正常通信,你需要进行一些配置。
首先,确保你的后端服务在端口3000上正常运行,并且能够接收来自前端的请求。你可以在终端中运行后端服务的命令,例如:
```
node server.js
```
然后,在前端工程的配置文件中,你需要设置代理,将前端的请求转发到后端服务的地址。在Vue项目中,你可以通过配置`vue.config.js`文件来实现代理。
在项目根目录下创建一个名为`vue.config.js`的文件,并添加以下内容:
```javascript
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
};
```
在这个配置中,我们将以`/api`开头的请求转发到`http://localhost:3000`这个后端服务的地址上。`changeOrigin`选项设置为`true`表示修改请求头中的`Host`字段为目标地址,`pathRewrite`选项用于重写请求路径,将`/api`去掉。
然后,在你的前端代码中使用相对路径调用后端接口即可,例如:
```javascript
axios.post('/api/login', data);
```
这样配置后,当你在开发模式下运行前端工程(例如使用`npm run serve`命令),所有以`/api`开头的请求都会被转发到后端服务的地址。
希望对你有所帮助!如果还有其他问题,请随时提问。
阅读全文