The premise

The protocol is the same, domain name is the same, and port number is different. However, if a token in the same field is stored in a cookie, the token stored in the previous field will be overwritten by the next token

Question 2: How do I solve this problem? If cookies of different secondary domain names under the same domain name are cleared, all cookies of the same domain name are cleared.

I have learned the same origin policy before, and mentioned that the same protocol, same domain name, and same port number are not met. If one of them is not met, cross-domain problems may occur.

However, in actual projects, we encountered the problem of “same protocol, same domain name, different port number, but when storing the same field token in cookie, we found that the token stored in the first field would be overwritten by the second token” when starting two projects locally.

Two projects have been started locally at the address

Project A: http://localhost:8001

Project B: http://localhost:8100

The two projects are the same except for the port. Set the token in the cookie in project A and project B respectively with values of 1 and 2. First set project A to 1 and then set project B to 2.

  1. Set the cookie token=1 in project A, but the cookie token=1 can be obtained in project B
  2. Set the token in project A to 1, in project B to 2, obtain the token in PROJECT A, and discover the token in the result to 1

conclusion

Cookies are port insensitive. If the Cookie name is the same, it will be overwritten automatically and the same data will be read.

Try to avoid this later, such as setting up separate tokens or different domain names.

SetCookie and getCookie are also attached

import { Base64 } from 'js-base64';

/ * * * *@param Name Cookie name *@param Value Indicates the value * of the cookie@param Time Indicates the cookie validity period */
export const setCookie = (name, value, time) = > {
  const times = time || 30 * 30 * 48;
  const d = new Date(a); d.setTime(d.getTime() + (times *60 * 1000));
  document.cookie = `${name}=${Base64.encode(value)}; expires=${d.toGMTString()}; path=/`;
};

/** * get cookie *@param name* /
export const getCookie = (name) = > {
  const ca = document.cookie.split('; '); // Ca format such as ["name=xiaoming", "age=25"]
  let str;
  for (let i = 0; i < ca.length; i += 1) {
    if (name === 'token') {
      if (ca[i].startsWith('token=')) {
        const c = ca[i].split('token=');
        str = Base64.decode(c[1]);
        returnstr; }}const c = ca[i].split('='); // c format such as ["name", "xiaoming"]
    if (c[0] === name) {
      str = Base64.decode(c[1]);
      returnstr; }}return str;
};

Copy the code

Solution to Problem 2:

I noticed the path attribute of cookie by accident. In set, THE PATH attribute was set. The practice test found that after setting this attribute, although the domain names of different items were the same, there would be no series phenomenon in cookie, and there would be no problem of clearing all cookies.

export const setCookie = (key, value, time) => { const cookies = new Cookies(); const expires = time || new Date( moment() .add(30, 'days') .format() ); // Expiration time, 30 days cookies. Set (key, encrypt(value), {path: '/**', Expires,}); };Copy the code

First, what is cross-domain?

When the protocol, domain name, or port of a URL request is different from the current page URL, it is called cross-domain.

Second, to solve the cross-domain method

1. Cross-domain solution through JSONP

JSONP is a common way for a server to communicate with a client down source. The biggest feature is simple application, good compatibility, disadvantage is only GET request, do not support POST request.

The idea: A web page requests JSON data from the server by adding a

  • Native implementation:
<script src="http://test.com/a.js?callback=dosomething"></script>
<script text="text/javaScript">
  function dosomething (res) {
    console.log(res)
  }
</script>
Copy the code
  • jQuery ajax
$.ajax({
  url: 'http://www.test:8080/login'.type: 'get'.dataType: 'jsonp'.jsonpCallback: 'callBack'.data: {},})Copy the code
  • Vue.js
this.$http.jsonp('http://www.test:8080/login', {
  params: {},
  jsonp: 'callBack',
}).then((res) => {
  console.log(res);
})
Copy the code