javascript - Can a project with separate front-end and back-end set cookies to maintain state?

Question

1. The project adopts front-end and back-end separation. The front-end is on the local server, using VUE. The back-end interface is on Alibaba Cloud. The back-end children's shoes say that cookies are set after the first visit. The cookies brought to each visit should be the same. However, when I tested it locally, the set-cookie returned to me was different. What is the reason for this?

2. eg: Two interfaces, such as the following

   1. get_user.json This interface will give me set-cookies. Can my front-end get this set-cookies?

2. 然后我登陆成功后再去获取订单信息  get_order.json的话，后端就会显示`未登录`，我发现后端set-cookie也发生了变化，为什么？

I want the server to remember the login status. My idea is to get the set-cookie after successful login, and then send the cookie to the backend each time to remember the status.

But the problem is that the value of this set-cookie cannot be obtained in the previous section. I use axios

Answer 1

Your front-end initiates a request to the backend, which is cross-domain and will not bring existing cookies.

Solution

1. Set up a reverse proxy or something to put the two on one domain name.

2. Front-end settings withCredentials, back-end settings Access-Control-Allow-Credentials.

Answer 2

Cookies with the HttpOnly attribute set cannot be accessed via the Document.cookie attribute, XMLHttpRequest and Request APIs using JavaScript to prevent cross-site scripting attacks (XSS).

As for why this value changes, it is related to the back-end session mechanism. When you browse a web page, the server randomly generates a string and stores it in your cookie. When you visit next time, the cookie will contain this string. Since the string is randomly generated and has enough digits, there is no need to worry about someone being able to forge it.