Solve the cross-domain problem of get and post requests of vue $http

Vue $http get and post request cross-domain problem

First configure proxyTable in config/index.js

 proxyTable: {
      '/api':{
          // target:'http://jsonplaceholder.typicode.com',
          target:'http://localhost:9080',
          changeOrigin:true,

           pathRewrite:{
               '/api':''
           }
      }

Username and password login form submission

methods: {
// get request // submitForm() {
            // var formData = JSON.stringify(this.ruleForm);
            // this.$http.get('/api/amdatashift/login/probe').then(function(data){

            // }).catch(function(){
            // console.log("Server exception");
            // });
            // }
  //post request submitForm() {
                 var formData = JSON.stringify(this.ruleForm);
                 this.$http.post('/api/amdatashift/login/user',{

                     username:this.ruleForm.username,
                     password:this.ruleForm.password
                 },{
                            emulateJSON:true
                        }).then(function(data){
                      console.log(data); 
                 }).catch(function(){
                     console.log("Server exception");
             });
             }
      }

Worth noting:

1. Be sure to set {emulateJSON: true}, otherwise cross-domain will fail.

2. In the Chrome browser, you still see http://localhost:8080 (the address where you start Vue, not the address of your server application), so don't be surprised when you see it, because the cross-domain is successful.

3. The http request must include /api. The proxy of index.js will remove /api. The access address in the browser is http://localhost:8080/api/amdatashift/login/user, and the actual access address is http://localhost:9080/amdatashift/login/user. Cross-domain access is achieved through a proxy.

The vue el-upload upload control keeps reporting cross-domain issues. The post request becomes a get request.

I was doing Vue uploading recently, and I used elmentui's el-upload control. As a result, there were always some problems. I hope everyone can avoid these pitfalls.

Without further ado, here are the codes in the screenshots.

1. Move controls and change action addresses

After configuration, test directly, emmm ..... The error is as follows:

It prompts a cross-domain problem, which is understandable because I am developing the front-end service and the back-end service ports on my local machine are different.

Find information, solutions to Vue's cross-domain problems, and then turn on the proxy.

Find the index.js file in the config of the vue project and open it, then add the following information. Note that changeOrigin is true. This means replacing http://192.158.111.101:8000 with /api. Example: The original address is 'http://localhost:8000/ssmShow/upload' and the current address is '/api/ssmShow/upload'.

So the upload control is changed to:

Testing; emmmm. . . Wrong again

Still reporting a cross-domain error, and requesting twice, and there is a problem with the request

File upload should still be a post request, but here is a get request and an options request. Confused. The 302 status will not change, so deal with the 500 error first.

There are explanations and processing methods for options requests on the Internet. I modified them accordingly (the method is to use filters to intercept requests and modify them). I pasted the code and mine is a java background.

Add a filter.

At the same time, web.xml needs to add the following

After the change, restart the Java background and test emmm. . . as follows:

This time the interface is called three times, wow. However, the good thing is that the options request has returned correctly. Because the options request has returned correctly, the request was made for the third time.

I looked at the third request carefully, this is a get request. How can uploading an attachment be a get request?

I searched for a long time online, and everyone said that there was a problem with the el-upload control. Action cannot be used, so I followed the method on the Internet to add a fake address in the action and directly tamper with the before-upload hook function of the control.

Submit the file directly using axios's post request.

Continue testing

The third upload request is still a get request, which is a problem. Even if there is a problem with the action in el-upload, how can a direct call to a post request directly become a get request? Then I searched for a long time. I found out from a reminder from an older brother.

When there is an error in js or vue, the post request will be converted into a get request. Then I found my mistake which was my address.

Don't you feel angry? It's just that there is no slash in this place. Add it and test it later.

Everything is fine, there is only one request, and the file is uploaded successfully. Although sad, I am still very happy.

Pay attention to the address I marked in the picture. The port is 8080 and there is the word "api". This is not the real address of my backend. This is the proxy address. He can access my real address through the proxy. So brothers, don’t think it’s wrong just because the port or address path is wrong. This is correct.

The above is my personal experience. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.