用webpack-server-dev的proxy设置代理,axios如何请求mock Server的模拟接口呢?

Question

问题描述

新人刚接触 关于webpack-server-dev解决跨域有一个疑问。
已经配置好了代理的域名了, 但是axios直接请求了代理后的域名+路由, 自然就返回404了, 因为根本没有请求到mockServer的接口. 可能我对此有什么误解错了。希望能有大神 解释一下

问题出现的环境背景及自己尝试过哪些方法

比如我的mock服务器监听的服务器是8009端口，而我把接口的域名定向了项目的端口8008.用axios请求的时候 显示404, 因为根本不存在这个接口. 难道要使用fetch嘛

相关代码

mock Server的服务: localhost: 8009

//webpack.config.js
module.exports = {
    ...
    
    devServer: {
        proxy: {
            '/api': 'http://localhost:8008',
        }
    },
    
    ...
}

//组件请求数据
axios.get('v1/api/tablelist')
.then(response => {
    console.log('response =========>', response)
})

你期待的结果是什么？实际看到的错误信息又是什么？

不用添加请求头的方法, 既能解决跨域, 也能成功请求到数据。谢谢

__

更新问题:2018.11.20

可能之前对proxy误解了。我现在再整理一下思路
首先: 我的后台接口地址是: http://localhost:8009/api/tablelist
而我项目的地址是: http://localhost:8008
所以需要代理的应该是8009的地址是吧?
也就是要这么配置devServer...

...
devServer: {
    proxy: {
        '/api': 'http://localhost:8009',
    }
},
...

不知道这么理解是否正确.另外我设置成这样, 请求接口也改成了

axios.get('/api/tablelist')
.then(response => {
    console.log('response =========>', response)
})

但为什么network里面的request url还是8008端口的呢？不是已经代理到8009了吗？谢谢

__

更新问题:2018.11.21

访问服务器和接口是可以拿到接口数据的。

配置和上面的更新问题一样. 但是network请求的依旧是没经过代理的url http://localhost:8008/xxx

Answer 1

network肯定是显示8008，代理是在后端的。

Answer 2

你的规则写的是 /api，但是你实际用的是 /v1起头。当然是不可能匹配上的。

Answer 3

你的devServer配置里面匹配的 api url 的 pathname 是 /api 开头时，才会将请求转发到你指定的地址

比如你的 api 里面 axios({ url: '/api/123' })，就会转发到 http://localhost:8008/api/123 上

Answer 4

你需要使用pathRewrite,把匹配上的API字段替换成空字符，否则target里面会自动将匹配的API字段添加到target的后面。
另外，如果使用了了一个单斜杠的匹配，那么一个单斜杆的匹配必须放在proxy的最后一个，否则单斜杆的后面的匹配API都无法识别，它们都只会识别单斜杆就停止了。
下面是我的示例，

proxy: {
            '/myblog/get_articles': {
                target: 'http://localhost:9000/myblog/get_articles',
                secure: false,
                pathRewrite: {'^/myblog/get_articles': ''},
                changeOrigin: true
            },
            '/': {
                target: 'http://localhost:9999/dist/index.html',
                secure: false,
                pathRewrite: {'^/': ''},
            }
        }