This is the second day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

Problems occurred during my own VUE project: After login, the server saved session information, consule.log output req.session also had login information, but when the login page was switched to the main page after login, it showed that I did not log in (I wrote the backend myself, and added a login verification).

Error reason

In the development environment, the different port numbers of the front and back ends cause cross-domain problems. When cross-domain requests are made, each AXIOS request is a new session instead of the session saved by the server when the user logs in, so the user is not logged in

The solution

When using AXIos to send a request, you must carry a Cookie to the server

Vue project entry JS file main.js add:

axios.defaults.withCredentials = true

import Vue from "vue";
import APP from "./app.vue";
axios.defaults.withCredentials = true
Copy the code

The Node server adds res.header(” access-Control-allow-credentials “, “true”) to cross-domain request headers.

 res.header("Access-Control-Allow-Credentials"."true");
 
Copy the code

Note here: When the Node server is resolved across domains, do not allow all addresses to access the server with *. Always use the front-end page address of the current project, such as mine is http://localhost:8080

If you want to send cookies, access-Control-allow-Origin cannot be set to an asterisk and must specify an explicit domain name consistent with the requested web page. At the same time, cookies still follow the same origin policy, only the Cookie set with the server domain name will be uploaded, cookies of other domain names will not be uploaded, and (cross-source) document. Cookie in the original web page code can not read cookies under the server domain name.

res.header("Access-Control-Allow-Origin"."http://localhost:8080");

Copy the code

The following is my own configuration of Vue project entry JS file and Node server entry JS file, just for reference

Vue:

import Vue from "vue";
import APP from "./app.vue";
import router from './router'
import store from './store'
axios.defaults.withCredentials = true

new Vue({
  el: "#app",
  router,
  store,
  template: "<APP/>".components: { APP },
});
Copy the code

The Node:

const express = require("express");
const router = require("./router");
const session = require("express-session");
const bodyParser = require("body-parser");

const app = express();

app.use(
  session({
    secret: "keyboard cat".resave: false.saveUninitialized: true,})); app.use(bodyParser.urlencoded({extended: false }));
app.use(bodyParser.json());
app.all("*".function (req, res, next) {
  res.header("Access-Control-Allow-Origin"."http://localhost:8080");
  res.header(
    "Access-Control-Allow-Headers"."Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild"
  );
  res.header("Access-Control-Allow-Methods"."PUT,POST,GET,DELETE,OPTIONS");
  res.header("X-Powered-By".3.2.1 "");
  res.header("Content-Type"."application/json; charset=utf-8");
  res.header("Access-Control-Allow-Credentials"."true");
  next();
});

app.use(router);

app.listen(3000.() = > {
  console.log("... qidongzhong");
});
Copy the code