一些印象深刻的坑小结

年底了最近也比较忙没怎么有时间来写博客，今晚找个时间回想一下遇到的一些令人深刻的坑，并写上解决方案；希望能帮到更多的人填坑。

1.webpack配置devServer proxy前后端分离接口返回504的问题

问题描述：配置webpack devServer proxy后端接口的时候，前面几个接口能正常访问，后面配置的接口居然504；按理说这些配置要错就全错，怎么有的可以访问有的不可以。

当时的配置是这样的：

devServer: {
    historyApiFallback: true,
    noInfo: true,
    proxy: {
        '/api1': {
            target: 'http://xxxxxxxx',
            secure: false
        },
        '/api2': {
            target: 'http://xxxxxxxx',
            secure: false
        },
        '/api3': {
            target: 'http://xxxxxxxx',
            secure: false
        }
    }
  },

当时接口 '/api1','/api2'都是可以正常访问的'/api3'却504，一开始我以为后台报错了，得到 后台同事确认说接口没问题之后。我就去查坑，后面去看了官方的文档换了另一种方式配置就好了

也比较方便后面添加接口。（PS：这里不得不说webpack的配置可真多）

devServer: {
    historyApiFallback: true,
    noInfo: true,
    proxy: [
        {
            context: ['/index', '/psActivities', '/searchType','/searchJd','/topSeach','/winners' ,'/notice', '/getBaseSummary', '/navigation', '/banners', '/login', '/knowledgeCompetition', '/getIndiProfile', '/addAnswer'],
            target: 'http://xxxxx',
            changeOrigin: true,
            secure: false
        }
    ]
  },

proxy变成了一个数组形式，然后数组里添加对象，context里放接口数组就好了。

 

2.axios POST提交405问题

项目中有个表单提交，跟后台同事约定接口方式是POST。万事具备，当我信心满满点提交按钮的时候，呃呃，报错了。报了405。我在想，怎么会报错呢？接口没问题啊，然后我换成get方式提交，居然可以了。带着疑问找了后台同事，为什么我接口提交GET可以POST不行呢?他说你有没有提交对啊？我说没错啊，结果一看，后台写的接口的方式是GET。。。（这里笑哭表情），结果改成POST提交就可以了。

不得不说，这个坑踩得有点 冤枉。

附上axiosPOST提交方式代码：

axios({
                    url: '/login',
                    method: 'post',
                    data: {
                        mobile: user.phone,
                        userName: user.name
                    },
                    transformRequest: [function (data) {
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                }).then( res => {
                    console.log(res);
                }).catch(err => {
                    console.log(err, "login");
                });