The process of Token transfer is as follows:

Server side return

After the user enters the account and password to log in, the server generates a Token string that identifies the user through encryption or other logic and returns it to the client.

After the front-end obtains it, you can manually save it to the cookie or localStorage of the browser.

The front-end to carry

After login, the next front-end HTTP request on the page, some need to let the server know who you are, so you need to bring the Token before the request interface.

So let’s take a look at the ways of passing:

1. Pass through URL parameters

// Network request function:function () {
    //...
    lettoken = Utils.getCookie(Const.TOKEN); url += `? _security_token=${token}`;
    return ajax(url, payload);
}
Copy the code

2. Pass the Form Data parameter

function(params) { params.opts = params.opts || {}; // You can do some token operationsif (store.getters.getToken) {
                params.opts.token = store.getters.getToken || ' '; } / /...return ajax(url, payload);
        };
Copy the code

3. Send the HTTP Request Headers to the server

/ / handle axios axios. Interceptors. Request. Use (config = > {const token = cookies. Get ('_security_token') || Cookie.get('_security_token_inc') | |' ';
  config.headers.common["Security-Token"] = token;
  returnconfig; }); // Or your own network libraryfunction() {
    //...
    return ajax(host + params.url, {
                data: params.opts,
                method: params.method,
                contentType,
                headers: {_security_token: '02_zMKe_99eah5s0G1'}}); }Copy the code

4. Cookies (cross domain issues are involved here)

(1) homology

If the HTTP request sent by the client is in the same domain, it is easy. The browser will automatically add the cookie in the same domain to the cookie field of the request header, and the server will extract the token in the cookie from the received request header

(2) Cross-domain
  • CORS

What if you want to use CORS to solve cross-domain problems?

Normally we would simply ask the server to set access-Control-allow-Origin to *, but here it’s not that simple.

Here you need a trilogy:

CORS requests do not send cookies and HTTP authentication information by default. Therefore, to send cookies to the server, the front and back ends need to be configured together:

The front-end needs to set withCredentials to true in the Ajax request to allow the browser to carry credentials and send cookies:

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
Copy the code

At the same time, the server needs to agree to send cookies:

Access-Control-Allow-Credentials: true
Copy the code

Note that access-Control-allow-origin cannot be set to an asterisk on the server, but only to the source domain of the request, otherwise the previous Settings will not be valid. Because if you set the asterisk, the browser won’t send cookies.

For CORS, please refer to teacher Ruan Yifeng’s cross-domain resource sharing CORS

  • Nginx reverse proxy

I know that cookie cross-domain problems can be solved by configuring proxies, but I have not tried it myself. I have only used proxies to solve purely cross-domain problems.

For example, in vue development, you can configure proxyTable property in the index.js file under config folder.

proxyTable: {
    '/':{
        target:'http://xxx.xxx.xxx'// changeOrigin:true// Cross-domain}}Copy the code

The function is to proxy a request from the local domain name to the target interface domain name and forward the request.

We’ll do it later in practice.

  • Cookies under different ports

Can cookies under different ports be shared?

Previously, it was thought that cookie completely follows the same origin policy and has cross-domain restrictions, which must meet the requirements of protocol, domain name and port. Practice has proved that it has nothing to do with port, but only with domain name. The cross-domain of cookie can be understood as cross-domain name. In fact, you can get this answer after a little thought, because cookie has a domain property, which is to set the domain name, does not involve the port, as long as the secondary domain name is the same, then it is shared.

I set a cookie for port 8082 and port 8081 under localhost, and found that the cookie was shared under port 8081

document.cookie = "name=oeschger";
Copy the code