一些印象深刻的坑小结

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

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                 });
博客园-原创精华区稿源:博客园-原创精华区 (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » 一些印象深刻的坑小结

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录