首页
/
每日頭條
/
生活
/
express跨域設置
express跨域設置
更新时间:2026-04-06 00:57:59

express跨域設置?最近在學習express,就用以前做的項目來進行express前後端分離的練手了,在做登陸注冊的時候發現跨域的時候,session的值是會失效的,導緻session裡面的數據獲取為undefined,網上找資料加上自己的不斷嘗試,終于找到了解決方法,簡單記錄一下解決方法,今天小編就來聊一聊關于express跨域設置?接下來我們就一起去研究一下吧!

express跨域設置(跨域post請求)1

express跨域設置

最近在學習express,就用以前做的項目來進行express前後端分離的練手了,在做登陸注冊的時候發現跨域的時候,session的值是會失效的,導緻session裡面的數據獲取為undefined,網上找資料加上自己的不斷嘗試,終于找到了解決方法,簡單記錄一下解決方法。

1、客戶端因為session原則上是需要cookie支持的,所以Ajax方法裡面必須添加 xhrFields:{withCredentials:true},表示允許帶Cookie的跨域Ajax請求( 特别說明,隻要使用的session都得加這句)

 $('#login').click(function () { $.ajax({ url: 'http://localhost:3000/users/yzm',//服務端路由地址 type: 'get', xhrFields:{withCredentials:true}, dataType: 'json', success:function(data){ $('#yzm_img').html(data) }, error:function(){ alert('error'); } }); }); $('#form_login').submit(function (e) {/!*登錄*!/ e.preventDefault();/!*阻止表單默認事件,頁面全局刷新*!/ var data=$('#form_login').serialize();/!*将表單裡的數據包裝起來*!/ $.ajax({ url : 'http://localhost:3000/users/login', type : "post", data : data, xhrFields:{withCredentials:true}, dataType:'json', success:function(msg) { alert("這是返回的數據"+msg); }, error:function(err){ alert("這是失敗的信息"+err); } }); });

通過設置 withCredentials: true ,發送Ajax時,Request header中便會帶上 Cookie 信息。

2、服務器端修改app.js文件

相應的,對于客戶端的參數,服務器端也需要進行設置。

對應客戶端的xhrFields.withCredentials: true 參數,服務器端通過在響應 header 中設置 Access-Control-Allow-Credentials = true 來運行客戶端攜帶證書式訪問。通過對 Credentials 參數的設置,就可以保持跨域 Ajax 時的 Cookie。

var express = require('express');var session = require('express-session');/*引入會話變量*/var app = express();app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "http://localhost:63342");//前端域名 res.header("Access-Control-Allow-Credentials",'true'); res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"); next();});

特别注意:服務器端Access-Control-Allow-Credentials = true時,參數Access-Control-Allow-Origin 的值不能為 ‘*’ ,必須為自己客戶端項目所在地址。

3、服務器中使用session

router.get('/yzm', function(req, res, next) { req.session.yzm='abcd';}router.post('/login', function(req, res, next) { console.log(req.session.yzm);}

Comments
Welcome to tft每日頭條 comments! Please keep conversations courteous and on-topic. To fosterproductive and respectful conversations, you may see comments from our Community Managers.
Sign up to post
Sort by
Show More Comments
推荐阅读
窮則思變上一句話
窮則思變上一句話
新聞立台文藝強台人才興台融合辦台全力打造書香廣電創新廣電和諧廣電窮則變,變則通,通則久2018年5月28日,出席中國科學院第十九次院士大會、中國工程院第十四次院士大會并發表重要講話,指出新時代全面深化改革決心不能動搖、勇氣不能減弱。科技體制...
2026-04-06
如何寫好橫折鈎的寫法
如何寫好橫折鈎的寫法
每日一練和你一起快樂練字,這裡是NASH寫字課堂。今天我們講筆畫系列“橫折鈎”。鈎,其寫法是:先蹲鋒蓄勢,再快速提筆,然後絞鋒環扭,順勢出鋒,力聚尖端。如人要跳躍,須先蹲下蓄力,然後猛然一躍而起。橫折鈎的寫法:橫折鈎書寫時橫畫部分一定要寫直...
2026-04-06
陝西寶雞如何推進鄉村振興
陝西寶雞如何推進鄉村振興
近年來,岐山縣提出做大“一碗面”經濟,促進農業提質增效。實施“一碗面”戰略,通過龍頭企業帶動産業鍊,特色産品提升價值鍊,電商物流串起供應鍊,推進岐山臊子面品牌化、産業化、市場化取得初步成效,地方美食由此邁向現代産業。陝西岐山,是周文化的發祥...
2026-04-06
漁家傲秋思解讀
漁家傲秋思解讀
漁家傲秋思解讀?漁家傲秋思原文範仲淹〔宋代〕,我來為大家科普一下關于漁家傲秋思解讀?以下内容希望對你有幫助!漁家傲秋思解讀漁家傲秋思原文範仲淹〔宋代〕塞下秋來風景異,衡陽雁去無留意。四面邊聲連角起,千嶂裡,長煙落日孤城閉。濁酒一杯家萬裡,燕...
2026-04-06
武漢東站最新官方消息
武漢東站最新官方消息
武漢東站最新官方消息?新華社北京8月11日電(樊曦、徐皓冰)記者11日從中國鐵建股份有限公司了解到,由中國鐵建鐵四院設計的武漢第四座大型鐵路客運站——武漢東站即将于12日正式開通運營,今天小編就來說說關于武漢東站最新官方消息?下面更多詳細答...
2026-04-06
Copyright 2023-2026 - www.tftnews.com All Rights Reserved