vue-cli3 axios跨域 对django服务器还是以本地地址发送请求 但是可以对百度可以正常发送请求

Question

问题描述

我用 vue 和 django 搭建了前后台，进行跨域， 前端服务是 http://127.0.0.1:8080/,后端是http://127.0.0.1:8000/list/goods,端口号不一样，我前端设置axios跨域以后，发送请求还是以本地地址发送，但是我的目标地址设置成百度就可以正常收到请求。

module.exports = {
    devServer: {
        host:'127.0.0.1',
        port: 8080,
        proxy: {
            '/api': {
                // target: 'https://www.baidu.com/',
                target: 'http://127.0.0.1:8000/',// 你要请求的后端接口ip+port
                changeOrigin: true,// 
                ws: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

请求部分的代码如下：

this.$axios.get('/list/order').then(response => {
                    if (response.data) {
                        console.log(response.data)
                    }
                }).catch(() => {
                    alert('请求失败')
                })

报错如下：

后来甚至变成这样，直接找不到api

最奇怪的是当把上面的地址变成百度是可以收到请求的。

后台是长这样的：

在给前端请求加了api之后的vue运行界面变成了：

此时请求如下：

        mounted(){
            this.$axios.get("/api/goods/ListItem")
                .then(response => {
                    if (response.data) {
                        console.log(response.data)
                    }
            })
        },

我仔细观察了一下后端的请求，11:50分是一打开页面的，12:00是刷新之后才会显示上图的截图。

Answer 1

你用 axios 发请求的地址没有带上 /api，所以压根没有命中你配置好的代理的逻辑。