One: The proxy proxy of vue-cli solves cross-domain problems
In the front-end development, it is inevitable to encounter the problem that the Ajax request and the server have different sources, so that the response returned by the Ajax request is intercepted by the browser, and an error is reported. To avoid cross-domain problems affecting the progress of our front-end project development, we are developing You can use vue-cli to configure the proxy, use the proxy server to send Ajax requests and the proxy server to accept Ajax requests to avoid problems with different sources
The working principle is as follows
When direct access generates cross-domain, we use vue-cli as a proxy server,
- When the vue-cli scaffolding tool starts, it will start a server for the front-end project. Users in the same local area network can all visit through the ip address.
- The vue-cli scaffolding supports configuring a proxy: forward the specified type of request to the target server.
- There is no cross-domain problem between the proxy service and the front-end service due to the unification of the protocol domain name and port, and the request can be sent directly
- Since the proxy service and the back-end service do not go through the restrictions of the same-origin policy of the browser, the request can be sent directly
In this way, we can forward the interface through the server proxy, and solve the cross-domain problem in the development environment. It seems complicated. In fact, vue-cli has built this technology for us, and we only need to configure it according to the requirements.
Two: The difference between localstorage and cookies
What are cookies?
A cookie is a small text file that is stored on your machine's hard drive by a web server when you browse a website. It records information such as your user name, password, web pages you browse, and the time you stay. When you come to this website again, the web server will first check if there is any cookie left by it last time. If there is, it will read the content in the cookie to judge the user, and send the corresponding web content, such as displaying a welcome slogan on the page, or allowing you to log in directly without entering an ID or password, etc.
What is localStorage?
localStorage is a persistent local storage. Unless it is deleted through js or the browser cache is cleared, the data will never expire.
The role of the two (same point):
localStorage is a browser local storage method in H5, but in fact, cookie itself is not used for server storage. But before the emergence of localStorage, cookies were abused as a storage tool, and all data was placed in cookies, even if these data were only used in the page and did not need to be sent to the server with the request (of course, cookies also have some limitations: size limited, limited number of cookies generated per domain name).
the difference:
1 The maximum storage capacity allowed
The maximum storage of a single cookie is 4k, if it is larger than 4k, the storage will fail, and the corresponding cookie information cannot be found in the browser;
the maximum storage of localStorage is 5m. If it is greater than this maximum limit, the browser prompts an error
2 storage time
The cookie is session-level storage by default, and the expiration time can be set
localStorage is a persistent storage, unless it is actively cleared, it will always exist as long as it is not deleted
3 Feasible
The cookie can set the scope, expiration time, etc.
localStorage can only be used to store data
4 usage scenarios
The usage scenario of cookies is generally as a kind of information transmission between the client and the server. When a cookie is added, the default same-origin cookie information will be automatically sent to the server as part of the request header.
LocalStorage is generally only used as data storage on the client side, such as storing the result data of an asynchronous request, and then when the page is re-rendered, the data in the storage can be directly read to reduce the sending of a request