Commonly used methods to solve cross-domain in vue projects

1. What is cross domain?

The emergence of cross-domain problems is due to the browser's same-origin policy problem. The so-called homology means that there must be the following three points in common: the same protocol, the same host, and the same port. If one of them is different, that is, a non-same-origin request occurs, a cross-domain will occur. When we request an interface, when words such as: Access-Control-Allow-Origin appear, it means that the request is cross-domain

2. How to solve cross domain?

Cross domain solution:

jsonp
cors
Node middleware proxy (twice cross-domain) that is, 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 you can request data from websites that don't support CORS.
Regardless of whether it is a Node middleware proxy or an nginx reverse proxy, the server is not restricted mainly through the same-origin policy.
In daily work, the most commonly used cross-domain solutions are cors and nginx reverse proxy

Mainly explain the two ways of CROS and Proxy

1、CROS

• CROS is the abbreviation of Cross-Origin Resource Sharing, which translates to the meaning of cross-domain resource sharing. It consists of a series of transmitted HTTP headers that determine whether the browser prevents front-end JavaScript code from getting responses to cross-origin requests.
• The implementation of CORS is relatively simple and convenient. It only needs to add some HTTP headers so that the server can declare the allowed access sources. As long as the backend implements CROS, it realizes cross-domain.

2. Proxy

• Proxy forwarding to the target server by starting the local server. The cross-domain is only for browsers, and the request sent by the node service will not come out cross-domain, thus solving the cross-domain problem.
• In the vue.config.js file

1. Multiple different proxy can be configured

devServer: {
    
    
    proxy: {
    
    
      '/api': {
    
    //代理标识，一般是每个接口前的相同部分
        target: 'http://23.15.11.15:8000', // 这里写的是访问接口的域名和端口号
        changeOrigin: true, // 允许跨域请求
        pathRewrite: {
    
     // 重写路径，替换请求地址中的指定路径
          '^/api': '/user'
        }
      },
      '/login': {
    
    
		 target: 'http://23.15.11.15:8000',
		 changeOrigin: true,
		 pathRewrite:{
    
    
		   '^/login':''  //替换成空
		 }
	   }
    }
  },

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:/www.ljc.com'
}

Example:

• http://localhost:8080/api/test --> http://www.ljc.com/api/test
• http://localhost:8080/login/index–> http://www.ljc.com/login/index