跨域问题中的才cookie问题

最新推荐文章于 2025-06-30 16:51:05 发布

陌上浮屠

最新推荐文章于 2025-06-30 16:51:05 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： node

本文链接：https://blog.youkuaiyun.com/weixin_38788947/article/details/80960977

node 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何在前端使用fetch和axios携带cookie进行跨域请求，并展示了后端通过Node.js和Express实现跨域及设置cookie的具体配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大家知道，跨域问题可以用cors;但是跨域问题下依然另外一个问题：跨域设置cookie；

前端处理

1：fetch发送带有诸如cookie之类的凭证的请求。你可以在选项对象中将credentials属性值设置为“include”：

fetch(url,{
credentials:"include"
})

注意：设置跟header平行；不能写在header里面；
这里写图片描述

2：axios允许携带凭证

axios.defaults.withCredentials=true

这里写代码片

后端处理

var createError = require('http-errors');
var express = require('express');
var path = require('path');
//设置cookie
var cookieParser = require('cookie-parser');
//跨域问题
var cors = require('cors')

//session中间件
// var session=require('express-session')
var logger = require('morgan');

var indexRouter = require('./routes/index');
var testRouter = require('./routes/test');
var loop = require('./routes/loop');
var lesson = require('./routes/lesson');
var details = require('./routes/details');
var register = require('./routes/register');
var login = require('./routes/login');
var isLogin = require('./routes/isLogin');


var app = express();


// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

//自定义中间件，设置跨域需要的响应头。
// var allowCrossDomain = function (req, res, next) {
//     //可以跨域
//     // res.header('Access-Control-Allow-Origin', req.headers.origin);
//     res.header('Access-Control-Allow-Origin','http://localhost:2000' );
//     res.header('Access-Control-Allow-Credentials', true);
//     res.header("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
//     res.header("Access-Control-Max-Age", "3600");
//     //携带凭证session(credentials必须写)
//     res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length ,Authorization , Accept ,X-Requested-With ,credentials');
//     // response.setHeader("Access-Control-Allow-Headers", "Content-Type,Content-Length,Authorization,Access,X-Requested-With,my-http-header");
//
//
//
//     if(req.method=='OPTIONS'){
//         res.send(200)
//     }else{
//         next();
//     }
// };
//
// app.use(allowCrossDomain);//运用跨域的中间件
var corsOptions = {
    origin: 'http://localhost:2000',
    credentials:true,
}
app.use(cors(corsOptions))
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
// app.user(session({
//     resave:true,  //每次重新保存
//     secriet:'haohao', //加密
//     saveUninitialized:true, //是否保存未初始化状态
// }))



app.use('/', indexRouter);
app.use('/test', testRouter);
//获取轮播图接口
app.use('/loop', loop);
//获取课程接口
app.use('/lesson', lesson);
//获取课详情程接口
app.use('/details', details);
//登录接口
app.use('/login', login);
//注册接口
app.use('/register', register);
//登录接口
app.use('/login', login);
//是否已经登录的接口
app.use('/isLogin', isLogin);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;