Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

preface

In web development, data requests often encounter cross-domain problems that result in the failure to request data.

If you use the following method to send getStudents to the http://localhost:4000 server for interface data request, you may encounter the following error if the backend does not handle cross-domain problems.

Cross-domain is caused by the same origin policy of the browser, that is, the protocol, host, and port numbers are different. We’re going to do web development locally and we’re going to have a different port number from the back end so we’re going to have cross-domain problems.

getStudent() {
    axios({
        url: "http://localhost:4000/getStudents".method: "GET",
    }).then((res) = > {
    	console.log(res.data);
    });
}
Copy the code

Vue provides two ways to solve cross-domain problems.

Vue Proxy configuration Method 1

Website:

Simple configuration can be used as follows, is to request the protocol, address and port number configured in the file, can be accessed.

Add the following configuration in vue.config

devServer: {
	proxy: 'http://localhost:4000'
}
Copy the code

Description:

  1. Advantages: Simple configuration. When requesting resources, you can directly send the request to the front-end server (8080)
  2. Disadvantages: Multiple proxies cannot be configured, and you cannot flexibly control whether to use proxies.
  3. How it works: If the proxy is configured as above, when a request is made for a resource that does not exist in the front end, the request is forwarded to the server (matching the front end resource is preferred)

Vue Proxy configuration mode 2

If the Web application has multiple interfaces to request data, or a front-end resource with the same name as the interface is blocked, you can use the following configuration method.

Note: The requested address needs a custom name after the port number. In the configuration file, add pathRewrite: {‘^/ API1 ‘: ‘} and remove the name from the address.

getStudent() {
    axios({
        url: "http://localhost:5000/api1/getStudents".method: "GET",
    }).then((res) = > {
    	console.log(res.data);
    });
}
Copy the code

Write vue.config.js to configure specific proxy rules:

module.exports = {
  devServer: {
    proxy: {
      '/api1': { // Match all request paths starting with 'api1'
        target: 'http://localhost:5000'.// The basic path of vigorous goals
        ws: true.pathRewrite: {'^/api1': ' '} // Remove the 'api1' prefix from the address where the request is sent
        changeOrigin: true
      },
      '/api2': { // Match all request paths starting with 'api2'
        target: 'http://localhost:5001'.pathRewrite: {'^/api2': ' '}
      }
    }
  }
}
Copy the code

Description:

  1. Advantages: You can configure multiple proxies and flexibly control whether requests go through proxies.
  2. Disadvantages: The configuration is cumbersome, and the prefix must be added when requesting resources.