Shulou(Shulou.com)05/31 Report--

This article mainly introduces the "Vue project how to set reverse proxy and cookie" related knowledge, editor through the actual case to show you the operation process, the method of operation is simple and fast, practical, I hope that this "Vue project how to set reverse proxy and cookie" article can help you solve the problem.

Vue setup reverse proxy and cookie setup project scene

Recently, using Vue to develop a new project, because the server has not yet arrived, call the back-end local interface, because there is no cross-domain when requesting the interface, there is no reverse proxy. After that, I was trampled on by a very basic thing, that is, some knowledge of cookie. Record it and deepen my impression.

Problem description

In the process of joint adjustment, it is found that after calling the login interface, and then calling other interfaces, the login status will be reported to be invalid. I was suddenly a little confused after doing the Mini Program project for a long time.

Cause analysis

First of all, when this problem arises, I ask the lower back end, and the back end says that Cookie is not passed to him. Then let's confirm what is the definition and function of Cookie?

Cookie in the HTTP protocol includes Web Cookie and browser Cookie, which is a small piece of data sent by the server to the Web browser. The server sends it to the browser's Cookie, which stores it and sends it to the server with the next request. Typically, it is used to determine whether two requests come from the same browser, such as keeping the user logged in.

When a HTTP request is received from the client, the server can send a Set-Cookie header with a response, the Cookie is usually stored by the browser, and then send the Cookie together with the HTTP header to the server.

When I saw this, I went to have a look. When I successfully called the login interface, the backend returned Set-Cookie, but found that the browser did not set it. When you see this, you know that the Set-Cookie browser doesn't work. Based on security considerations, Cookie cannot obtain cross-domain Cookie in browsers.

Solution

Set the reverse proxy in the Vue project Reagan directory vue.config.js

Module.exports = {devServer: {/ / set proxy proxy: {"/ api": {target: "http://127.0.0.1:8081/", / / domain name ws: true, / / whether to enable websockets changOrigin: true, / / enable proxy: create a virtual server locally, then send the requested data and receive the requested data at the same time / / in this way, there will be no cross-domain problems in the data interaction between the server and the server. PathRequiresRewrite: {"^ / api": "/"}

When requesting

/ /'/ api' equals' http://127.0.0.1:8081/api'// now the request address is' http://127.0.0.1:8081/api/picture?method=upload'get('/api/picture?method=upload')

Solution complete! Happy.

Details of using js-cookie for Vue projects

Background: in the recent vue project, because the token of the project needs to be set, of course, the behavior logic of this expiration has always been controlled by the back end, but this time the front end is also required to monitor the token time. Because I am too lazy to encapsulate cookie, I use a cookie wrapper library of js-cookie.

What is js-cookie?

By looking at the name, we know that this is a js API about cookie storage. According to the official website, it has the following advantages: it is suitable for all browsers, accepts any characters, has no bug after any test, supports CMD and CommonJS, and is very small after compression, only 900 bytes.

Install npm install js-cookie' js-cookie' in the project-save's entry file (main.js) in the project globally introduces import Cookies from 'js-cookie' for use in the project

1. The attributes supported by the cookie set method are: expires- > Expiration time path- > set to create cookie domain- for the specified page. Settings have false and true for the visible secure- > values of the specified domain name and subdomain names of the specified domain name, indicating whether the setting only supports https. Default is false.

Cookies.set ('key',' value'); / / create a simple cookieCookies.set ('key',' value', {expires: 27}); / / create a cookieCookies.set with a validity period of 27 days ('key',' value', {expires: 17, path:''}); / / you can create a cookie valid for 7 days for the current page by configuring path

2. Take cookie

Cookies.get ('key'); / / get the valueCookies.get () corresponding to the specified key; / / get all value

3. Delete cookie

Cookies.remove ('key'); / / Delete the normal cookieCookies.remove (' name', {path:'}); / / Delete the cookie with the specified page path

Note: if you save an object, such as:

UserInfo = {age:111,score:90}; Cookie.set ('userInfo',userInfo)

The extracted userInfo needs to be parsed by JSON and parsed into objects:

Let res = JSON.parse (Cookie.get ('userInfo'))

Of course you can also use:

Cookie.getJSON ('userInfo'); this is the end of the introduction to "how to set up reverse proxy and cookie in the Vue project". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.