Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to solve the pit of using axios to call the back-end interface in Vue". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to solve the pit of using axios to call the back-end interface in Vue".

Scenario of pit problem when axios calls back-end interface

In the Vue.js project, using axios to call the back-end interface (built by SpringBoot) leads to the situation that the back-end interface cannot get the data.

The following scenarios are summarized

@ RequestParam is used to handle application/x-www-form-urlencoded encoding (Content-Type is application/x-www-form-urlencoded by default, which is not specified in the HTTP protocol request header).

@ RequestParam can accept attributes of simple types or object types. In essence, the key-value pair in Request.getParameter () is configured by Spring's conversion mechanism ConversionService to convert parameters to accept objects or fields.

@ RequestParam is in the form of QueryString in a GET request, and the value of the POST request BodyData is accepted by Servlet and converted to the Request.getParameter () parameter set.

@ RequestParam will have a 400error when the POST request specifies Content-Type as application/json;charset=UTF- 8.

@ RequestParam cannot accept parameters using @ RequestParam JSONObject params, or 500 errors will occur.

The @ RequestParam front end cannot use JSON.stringify () to format the parameter, instead of using QS in axios: QS.stringify ().

RequestBody is used to handle data passed by HTTPEntity (HTTP entities, HttpEntity entities can make streams or strings), and is generally used to handle non-application/x-www-form-urlencoded encodings.

The GET request does not have HTTPEntity, so @ RequestBody is not applicable, otherwise the parameters will be garbled and cause 400 errors.

When @ RequestBody is used in a POST request, parameters must be passed through HTTPEntity. Content-Type must be set to application/json;chatset=UTF-8 in the HTTP request header, otherwise a 415 error will occur. SpringMVC parses the data in HTTPEntity by using HandlerAdapter to configure HTTPMessageConverter, and then binds it to Bean.

When POST requests to use @ RequestBody, the front end must be formatted as JSON string data using JSON.stringify ().

Note the Content-Type request header type @ PathVariableURLGETALL@RequestParamURLGETALL@RequestParamBodyALLapplication/form-data supported by the request type supported by the supporting type. Application/x-form-www-urlencoded@RequestBodyBodyALLaplication/json calls the backend API to use the axios cross-domain problem to find the vue.config.js in the project first.

Modify devserver

Devserver / api/app

There is no problem in configuring ip port under devserver, if the Access-Control-Allow-Origin cross-domain problem occurs when the domain name access interface is changed.

Go to the backend request header to set access-control-allow-origin:'*'

The personal test works!

1. If a call to axios sends two get requests and one of the status codes is 301, the redirect browser helps you send the request again (because your front-end routing configuration is different from that of the back-end, I am short of configuration / occurrence to send two get requests, one of which is 301)

two。 Another thing is that the head of the first request for the two requests is options, which is a big push from Baidu.

Thank you for reading, the above is the content of "how to solve the pit in Vue using axios to call the backend interface". After the study of this article, I believe you have a deeper understanding of how to solve this problem in Vue using axios to call the backend interface, and the specific usage still needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.