00009.axios代理配置

1.Angular:在项目根目录下创建一个名为 proxy.conf.json 的文件,并添加如下配置:

{
  "/api": {                                              // 这里的'/api'是目标接口的路径前缀
    "target": "http://localhost:3000",       // 目标接口的域名
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true,                     // 是否启用虚拟主机名(服务器响应头中host的值,标识着请求时从哪里发出来的)
    "pathRewrite": {'^/api': ''  }              // 重写路径,将'/api'替换为空字符串
  }
}

Vue:在项目的根目录下创建一个vue.config.js文件,并添加如下配置:

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

React:在项目的根目录下创建一个setupProxy.js文件,并添加如下配置:

const { createProxyMiddleware } = require('http-proxy-middleware');
 
module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
      pathRewrite: {'^/api': ''  } 
    })
  );
};
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容