一些印象深刻的坑小结

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

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

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

当时的配置是这样的：

 1 devServer: {
 2     historyApiFallback: true,
 3     noInfo: true,
 4     proxy: {
 5         '/api1': {
 6             target: 'http://xxxxxxxx',
 7             secure: false
 8         },
 9         '/api2': {
10             target: 'http://xxxxxxxx',
11             secure: false
12         },
13         '/api3': {
14             target: 'http://xxxxxxxx',
15             secure: false
16         }
17     }
18   },

当时接口 '/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提交方式代码：

 1 axios({
 2                     url: '/login',
 3                     method: 'post',
 4                     data: {
 5                         mobile: user.phone,
 6                         userName: user.name
 7                     },
 8                     transformRequest: [function (data) {
 9                         let ret = ''
10                         for (let it in data) {
11                             ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
12                         }
13                         return ret
14                     }],
15                     headers: {
16                         'Content-Type': 'application/x-www-form-urlencoded'
17                     }
18                 }).then( res => {
19                     console.log(res);
20                 }).catch(err => {
21                     console.log(err, "login");
22                 });

 

转载于:https://www.cnblogs.com/leungUwah/p/8099626.html