共有两种方式来配置代理

代理

基础配置

直接在package.json文件中配置,

  1. "proxy":"http://localhost:5000"

此时,会先原服务地址上进行请求,如果请求不到资源文件,那么就会将请求转发到此地址上
脚手架代理 - 图1
但是这种方式只能配置转发到一个地址,不能配置多个代理

完整配置

在项目的src目录下,创建setupProxy.js配置文件

  1. const { createProxyMiddleware } = require('http-proxy-middleware');
  2. module.exports = function (app) {
  3. app.use(
  4. createProxyMiddleware('/api', {
  5. target: 'http://localhost:5000',
  6. changeOrigin: true,
  7. pathRewrite: {
  8. '^/api': '',
  9. },
  10. }),
  11. );
  12. };

学过如何在vue中配置代理的话,这一段代码应该很好理解

可以正常请求
image.png