Recently, I encountered two pits in succession when CONNECTING the interface with the back-end. It took some time to find out the reason, so I made a record here.

The GET request is normal, but the POST request fails

At first, I thought it was the back-end interface problem, so I went to the back-end to check. As a result, the back-end partner said that it did not receive the data transmitted from the front end, of course, an error was reported.

The data didn’t go through? How’s that? The browser’s network transfer console clearly shows the parameter data with POST.

I have checked the proxy proxy and encapsulated AXIOS, which are written in the same way as in previous projects. There is no problem.

So where is the problem?

I tried POST requests from other places, but they didn’t work. That is, POST requests fail, not as a single phenomenon, but as all POST requests fail in the project.

I can’t find the problem, so I have to ask the big guy. If you mock it, please comment it out. If you mock it, please comment it out.

Open the vue.config.js file to see, sure enough there is mock, easily commented out.

devServer: {
    / / before: the require (". / mock/mock - server. Js) '
    proxy: {
      "/api": {
        target: "http://localhost:3000".changeOrigin: true.// Set this parameter to avoid cross-domain
        pathRewrite: {
          "^/api": "/"}}}}Copy the code

To re-initiate the POST request, successful! Turns out, mocks affect real POST requests!

The data returned by the back end of Preview and Response is inconsistent

Recently, the enterprise id was used to request the enterprise details, but the id was passed, but the backend returned the details data is empty, there is no enterprise entity.

I thought it must be the backend ID that was wrong, so I went to the backend partner to check. The back end does a check, says the id returned is correct, and then shows me the data in the database.

Hey, the database ID data, how and the front-end access to the ID data is not the same. What happens in between.

Later, the backend partner tried again, both interface documentation, and Postman, tried no problem. Then I checked my browser’s Response, which is also correct.

At this time, I found that the ID in Preview is different from that in Response. I usually like to look at the data in Preview, because it is more intuitive, so when I opened Response at the back end, I realized that the data in the two are inconsistent.

Since the data returned by the back end is fine, the problem is the front end. I had no choice but to search on my own, and I did.

“Due to the Number type itself, JavaScript cannot completely represent the Number of Long type. When the length of Long is larger than 17 bits, there will be a problem of accuracy loss, and some browsers will convert to 0 if the length is larger than 17 bits.”

Then, after some discussion with the backend partner, we finally decided to change the long from the backend to a String. Problem solved!