Vue uses proxy to solve cross-domain problem of requests detailed explanation

In daily development, our front-end is essential to request data like the back-end.

However, the front and back ends are generally separated, so the domain names, ports, etc. are definitely different, so you will inevitably encounter the same-origin policy restrictions of the browser.

In general, the backend will set up sources, methods, etc. that request cross-domain permission.

But it is not guaranteed that the backend is negligent and forget this problem.

In order not to affect our development, the front-end can only passively find the back-end to solve cross-domain problems.

In fact, our front-end can also solve cross-domain problems, that is, use proxy.

For example:

The address I requested is this:http://192.168.12.36:9000/api/SourceManager

But the port number of my local vue project is8080, here involves the same-origin policy problem caused by inconsistent port numbers (don't think of changing it to the same port, it will conflict).

Then if I initiate a request, it will be intercepted by the browser across domains. Let's take a look at the solution:

There is a file in the config folder of vue:

Configure the proxy in proxyTable (the name can be given casually, I use web)

proxyTable: {
  '/web': {
    //Set the interface domain name and port number you call. Don't forget to add http.    target: 'http://192.168.12.36:9000/api/SourceManage',
    changeOrigin: true,
    pathRewrite: {
      '^/web': ''
      //This is understood as using '/web' instead of the address in the target. In the later component, we use web instead of the interface when we drop the interface. For example, I want to call 'http://192.168.12.36:9000/api/SourceManage/user/add' and write '/web/user/add' directly.    }
  }
}

Because I extracted the public request address, you can refer to the following section:

Get data:http://192.168.12.36:9000/api/SourceManager/GetAll

Add data:http://192.168.12.36:9000/api/SourceManager/AddSource

Modify data:http://192.168.12.36:9000/api/SourceManager/UpdateSource

Delete data:http://192.168.12.36:9000/api/SourceManager/DeleteSource

Theoretically, the port number is only allowed in the proxy, but for the sake of convenience in the later stage, I extracted the public address and configured until the end of the public, so what I configured in the proxy ishttp://192.168.12.36:9000/api/SourceManager

Then configure the production environment (development environment) in the file in the config folder:

Here I write my own path port number and the proxy name configured earlier:

 = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ROOT: ' "http://localhost:8080/web" '
})

Then configure the product environment (online environment) in the file in the config folder:

I won’t write this for the time being. When you go online to package, just write it as your actual request address.

 = {
  NODE_ENV: '"production"',
  API_ROOT: ' "" '
}

Then change it to the address you requested to configure:

// Introduce axiosimport axios from 'axios'
 
// Use axios = axios;
 
// Configure the public request address = .API_ROOT;

Then request it on each page, please refer to the writing method:

Because the public address has been configured before, only the paths that were changed later and the reference settings in the previous one can be written.

({
  method: "get",
  url:`${}/GetAll`, 
})
.then((response)=> {
  (response)
})
.catch((error)=> {
  (error);
});

Don't forget to restart the server after setting up the proxy.

OK, the above is the problem of configuring proxy in vue to solve cross-domain problems.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.