Vue AXIOS and Go Frame Optical Options request cross-domain problem detailed

Cross-domain issues can be disconnected from the front and back:

Vue + AXIOS

AXIOS request head uses ‘content-type’: ‘Application / JSON’,


and set the authorization field in the header for transmitting token,


parameter does not pass the QS transcodation,


Using the following code test login interface:

// For easy operation, the AXIOS instance has been mounted to this. $ AXIOS on this. $ AXIOS.POST ‘/ Signin’, {Account: ‘, Password:’ ‘} .then (res => {console.log (‘ success: ‘, res)} .catch (err => {console.log (‘ failed : ‘, err)})

   
Access to XMLHttpRequest At’ http://127.0.0.1:8080/ API / V1 / Signin ‘from Origin’ http: // localhost: 8081 ‘HAS BEEN BEEN Blocked by Cors Policy: Response to Preflight Request Doesn’t Pass Access Control Check: It Does Not Have Http Ok Status.

At the same time, the POST request becomes an Options request and returns 404, as shown below:

There are two problems here, and why is POST to become Options? The URL path is right, why will it return 404?

POST Change Options Problem involves complex cross-domain requests, meets any of the following conditions, even for complex requests:

Vue axios与Go Frame后端框架的Options请求跨域问题详解 uses the HEAD, GET, POST Request method;

The head field does not exceed Accept, Accept-Language, Content-Language, Last-Event-ID, Content-Type, and the value of Content-Type is limited to Application / X-WWW-FORM- Urlencoded, Multipart / Form-Data, Text / Plain;

Due to the set of authorization fields, Content-Type is also set to Application / JSON, so this request is complex cross-domain request, which will be officially communicated In addition, an Options query request is added, called the Preflight Request, and the pre-inspection request is successfully responded to the server, and the pre-inspection request will be successfully responded to the real POST request.

Can I return 404 for any OPTIONS request?

The answer should be very clear through the error description and analysis above, that is, the server is not responding to the OPTIONS type request, causing 404.
  1. The route code of GOFRAME is as follows:


func init () {S: = g.server () // Binds CORS middleware s.bindmiddleWare (“/ aPI / * “”, Middleware.cors) S.Group (“/ API”, FUNC (Group * GHTTP.Routergroup) {… // Key: This route only supports post group.post (“/ signin”, UserController, “Signin”}}}

/ Signin’s routing specifies the request mode as POST, naturally unable to respond to other types of requests, use the following method to define all types of Request:
Group.All (“/ Signin”, UserController, “Signin”)

The route supports all request methods, but it is necessary to determine which type requests need to be responded in the signin method of the controller, which is very cumbersome, not recommended.
  In fact, as long as the Options request is in the CORS middleware To do a unified response, the upper code:  
// CORS allows the interface cross-domain request FUNC CORS (R * ghttp.request) {// Use the frame default CORS settings R.Response.corsdefault () if r.Method == “options” {r.Response.writestatusexit (http.statusok)} else {r.MiddleWare.next ()}}

In addition, it should be noted that using the GOFRAME framework, the CORS middleware is to be added globally. If you add it in the routing group, the case where the Options request 404 will also appear, and the code of the middleware isNot executed during the request, the reason is unclear, and you need to know more about the framework.
 The cross-domain issues described herein have occurred when using Vue + AXIOS on the web. It is normal to use Postman tool. It is normal, and the troubleshooting process and solution are recorded. I hope to help the children's shoes, Any questions can be discussed together in comments.   To this article about Vue AXIOS and Go Frame backend framework requests cross-domain issues detailed articles, more related Vue Axios and Go Frame cross-domain content, please search for Tumi cloud Articles or continue to browse the following related articles, I hope everyone will support Tumi clouds! 
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment