【踩坑记】前后端联调中遇到的两个坑

最近在与后端联调接口时，不太顺利，接连遇到两个坑，花了一些时间，才找到原因，故此记录一下。

一、GET请求正常，POST请求报错

一开始以为是后端接口问题，就找后端排查一下，结果后端小伙伴说，没有接收到前端传过来的数据，当然报错。

数据没传过去？怎么会？浏览器的网络传输控制台，明明显示了有POST的参数数据啊。

检查了proxy代理，封装的axios,都和以往项目中写法一样，没什么问题。

那么问题，到底出现在哪呢？

又去试了一下其他地方的POST请求，发现都不行。也就就是说，POST请求报错，非单个现象，而是项目中所有的POST请求都不行。

自己实在是找不到问题所在了，只好去请教大佬。大佬一看，说自己貌似遇到过类似的问题，然后让我看看vue.config.js中有没有使用mock,如果用了，注释掉试试。

打开vue.config.js文件一看，果然有mock，顺手注释掉。

devServer: {
    // before: require(’./mock/mock-server.js’)
    proxy: {
      "/api": {
        target: "http://localhost:3000",
        changeOrigin: true, // 设置这个参数可以避免跨域
        pathRewrite: {
          "^/api": "/"
        }
      }
    }
  }

再去重新发起了POST请求，成功了！原来，mock会影响真实的POST请求！

二、Preview和Response里面后端返回的数据不一致

最近通过企业id请求企业详情，id传过去了，后端却返回详情数据为空，没有该企业实体。

心想肯定是后端id弄错了，于是便又去找后端小伙伴排查。后端排查一番，说返回的id是正确的，然后给我看了数据库的数据。

咦，数据库的id数据，怎么和前端获取的id数据不一样。中间发生了什么。

后来，后端小伙伴又尝试了一番，无论是接口文档，还是postman,试了都没有问题。然后，又来查看了我浏览器的Response, 也是对的。

这时，我才发现，Preview里的id和Response里的id不一样。我平时喜欢看Preview里面的数据，因为比较直观，所以当后端打开Response时，我才意识到两个里面的数据不一致。

既然后端返回数据没问题，那问题就出在前端了。没办法，我只能自己去搜索了，还真搜到了。

"JavaScript中由于Number类型的自身原因，并不能完全表示Long型的数字，在Long长度大于17位时会出现精度丢失的问题，超过17位的部分浏览器会转换为0显示"

然后，与后端小伙伴商量了一番，最终决定由后端将long型改为String类型。问题终于完美解决！