Handle cross domain issues

2. Drawing: the whole login process

3. Draw a picture to explain the proxy proxy of vue-cli to solve cross-domain problems

4. The difference between cookie and localStorage

storage size

Cookie: generally no more than 4K (because every http request will carry a cookie, so a cookie is only suitable for saving small data, such as a session ID)

localStorage: 5M or larger

data validity period

cookie: generally generated by the server, and the expiration time can be set; if the time is not set, the cookie will be invalid when the browser is closed, if the time is set, the cookie will be stored in the hard disk, and it will expire only

localStorage: Permanently valid, the window or browser is closed and will always be saved unless manually cleared permanently, so it is used as persistent data

scope

cookie: shared among all same-origin windows

localStorage: shared among all windows of the same origin

communication

ccokie: Ten types are carried in the same-origin http request, even if not needed, so the cookie is passed back and forth between the browser and the server; if you use cookies to save too much data, it will cause performance problems

localStorage: only saved in the client (ie browser), does not participate in communication with the server; does not automatically send data to the server, only saves locally

ease of use

cookie: You need to encapsulate it yourself, the native cookie interface is not friendly enough

localStorage: The native interface is acceptable and can be encapsulated to have better support for Object and Array

Application Scenario

cookie: determine whether the user has logged in to the website, so as to realize the next automatic login or remember the password; save event information, etc.

localStorage: often used for long-term login (judging whether the user has logged in), suitable for long-term storage of local data

5. Blog: Xiaobai look here - how do I deal with cross-domain issues

5.1 What is cross domain

When address A (the address of the page that initiated the request) sends a request to address B (the address of the target page to be requested),

If the addresses of A and B are not the same at: protocol domain name and port , it means that the request is cross-domain

5.2 Reasons for cross-domain error reporting

Browser same-origin policy && request type is ajax type && request is indeed cross-domain

5.3 Solution (proxy forwarding method)

        1. The front end uses JSONP to send requests (jsonp is not an ajax request)

   2. Write the code (CORS) in the backend to add the necessary response headers in the response, so that the browser does not report an error after the response comes back

3. Proxy forwarding:

5.4 Vue-cli solves cross-domain configuration instructions

1. vue.config.jsIn the configuration file

module.exports = {
  devServer: {
    // ... 省略
    // 代理配置
    proxy: {
        // 如果请求地址以/api打头,就出触发代理机制
        // http://localhost:9588/api/login -> http://线上的地址/api/login
        '/api': {
          target: 'http://线上的地址' // 我们要代理的真实接口地址
        }
      }
    }
  }
}

2. In the request.js configuration file

({
  timeout: 5000
	// baseURL: ''
})

3. Delete the /api part in user.js