devServer 代理缺少 URL 部分

Posted

技术标签:

【中文标题】devServer 代理缺少 URL 部分【英文标题】:Missing URL parts with devServer proxy 【发布时间】:2021-04-06 02:11:57 【问题描述】:

我的 Vue 项目中有以下 vue.config.js:

module.exports = 
    devServer: 
        proxy: 
            '^/api/': 
                target: 'https://example.com/api/',
                changeOrigin: true,
                logLevel: 'debug'
            ,
        
    

所以对/api/* 的所有请求都应该重定向到https://example.com/api/*。不幸的是,代理似乎删除了 api/ 之后的部分 URL:

[HPM] POST /api/api-token-auth/ -> https://example.com/api/

api-token-auth/ 部分发生了什么?

【问题讨论】:

【参考方案1】:

要根据docs 中的语法将所有请求代理到/api,请创建如下规则:

module.exports = 
    devServer: 
        proxy: 
            '/api': 
                target: 'https://example.com',
                changeOrigin: true,
                logLevel: 'debug'
            ,
        
    

您不应该再次将 /api 路径放入 target 中,因为原始路径中包含 /api 之后的所有内容都将附加到目标上。

【讨论】:

谢谢,就像一个魅力。有时人们没有发现明显的......

以上是关于devServer 代理缺少 URL 部分的主要内容,如果未能解决你的问题,请参考以下文章

iview-cli 设置跨域代理服务器

webapck dev server代理请求 json截断问题

Vue-cli3 devServe.Proxy 多地址爬坑记

webpack-dev-server 代理:带通配符的上下文

用webpack-dev-server开发时代理,决解开发时跨域问题

webpack-dev-server proxy代理,get请求成功,post请求失败