Summary of commonly used cross-domain solutions in vue projects (CORS and Proxy)

1. What is cross-domain?

Cross-domain problems occur because of the same-origin policy problem of browsers. The so-called homologous origin means that there must be the following three similarities: the same protocol, the same host, and the same port. If one of them is different, that is, a non-homologous request occurs, a cross-domain occurs. When we request an interface, the word "Access-Control-Allow-Origin" appears, which means that the request is cross-domain.

2. How to solve cross-domain?

Cross-domain solutions:

jsonp
cors
Node middleware proxy (two times cross-domain) i.e. Proxy
nginx reverse proxy CORS supports all types of HTTP requests and is the fundamental solution for cross-domain HTTP requests.
JSONP only supports GET requests. The advantage of JSONP is that it supports old-fashioned browsers and can request data from websites that do not support CORS.
Whether it is a Node middleware proxy or a nginx reverse proxy, the server is mainly not restricted through the same-origin policy.
In daily work, the most commonly used cross-domain solutions are cors and nginx reverse proxy.

Mainly explains the two methods of CROS and Proxy

1、CROS

• CROS is the abbreviation of Cross-Origin Resource Sharing, which means cross-domain resource sharing. It consists of a series of transmitted HTTP headers that determine whether the browser prevents the front-end JavaScript code from getting a response to cross-domain requests.
• The implementation of CORS is relatively simple and convenient. You only need to add some HTTP headers to allow the server to declare the allowed access source. As long as the backend implements CROS, it will be implemented cross-domain.

2. Proxy (Proxy)

• Proxy forwarding of the target server by starting the local server. Cross-domain is only for the browser, and requests issued to node services will not come out across domains, thus solving the cross-domain problem.
• In the file

1. Can configure multiple different proxy

devServer: {
    proxy: {
      '/api': {//Proxy ID, generally the same part before each interface        target: 'http://23.15.11.15:8000', // What is written here is the domain name and port number of the access interface        changeOrigin: true, // Allow cross-domain requests        pathRewrite: { // Rewrite the path and replace the specified path in the request address          '^/api': '/user'
        }
      },
      '/login': {
		 target: 'http://23.15.11.15:8000',
		 changeOrigin: true,
		 pathRewrite:{
		   '^/login':''  //Replace with empty		 }
	   }
    }
  },

Example:

• http://localhost:8080/api/test --> http://23.15.11.15:8000/user/test
• http://localhost:8080/login/index–> http://23.15.11.15:8000/index

2. Proxy for all interfaces

devServer: {
 proxy: 'http:/'
}

Example:

• http://localhost:8080/api/test --> /api/test
• http://localhost:8080/login/index–> /login/index

Summarize

This is the end of this article about the commonly used cross-domain solutions in vue projects. For more related cross-domain solutions, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!