node express中解决session跨域undefined

悠悠 2021-07-24 19:47 763阅读 0赞

问题产生原因起因：http是无状态的，因此我们通常需要用到cookie以及session来保存状态，session是在服务器端存储的，
    会和cookie一起使用，设置了session之后，会发送给浏览器一个cookie,这个cookie是session_id，当再次请求的时候浏览器会将它发送给服务器，以此来找到对应的session.
    但是，我们实际使用的时候通常会用到跨域，就是向不同的域发起请求，但是默认情况下此时cookie是不会发送给服务器的，此时就导致了丢失session_id,从而导致了session的值为undefined。
    
    方式一:
    	1、修改axios请求
    		在main.js中导入axios
    		
    		import axios from 'axios';
    		 
    		axios.defaults.withCredentials=true; //跨域携带cookie
    	
    	2、后台跨域处理
    		app.all("*", function(req, res, next) {
    			 if (!req.get("Origin")) return next();
    			  // use "*" here to accept any origin
    			  res.set("Access-Control-Allow-Origin",req.headers.origin);  
    			  	这里除了req.headers.origin外还可以是:"http://localhost:3000"
    			  res.set("Access-Control-Allow-Methods", "GET");
    			  res.set("Access-Control-Allow-Headers", "X-Requested-With, Content-Type");
    			  res.header('Access-Control-Allow-Credentials', 'true');
    			  // res.set('Access-Control-Allow-Max-Age', 3600);
    			  if ("OPTIONS" === req.method) return res.sendStatus(200);
    			  next();
    		});
    	
    	3、前台请求
    		前台请求和后台的设置必须一样
    			前台的请求路径为'http://localhost:3000';
    			后台的res.set("Access-Control-Allow-Origin",req.headers.origin); 或'http://localhost:3000';
    			localhost不能换成127.0.0.1
    
    方式二:
    	1、设置跨域

![在这里插入图片描述][20200818092324549.png_pic_center]

2、修改请求接口,将127.0.0.1换成localhost

![在这里插入图片描述][20200818092539520.png_pic_center]

或者/api/api/captcha

代码示例:  
前台:

import ajax from './ajax'
    
    // 1. 基础路径
    const BASE_URL = 'http://localhost:3000';
    
    // 2. 请求方法
    
    // 2.1 请求首页的轮播图
    export const getHomeCasual = ()=>ajax(BASE_URL + '/api/homecasual');
    
    //2.9 手机号密码登录
    export const pwdLogin=(user_name,pwd,captcha)=>ajax(BASE_URL + '/api/login_pwd',{ user_name,pwd,captcha},"POST");

后台配置:

[20200818092324549.png_pic_center]: /images/20210724/1de6f47a115d4fe3b9f3cca2ca810821.png
[20200818092539520.png_pic_center]: /images/20210724/1fa71dec449a41f9852e5370b188f73a.png