資訊專欄INFORMATION COLUMN
摘要：想要做一個(gè)的登錄需要解決的問題的端口向的端口發(fā)送一個(gè)請(qǐng)求這會(huì)造成跨域問題跨域，指的是瀏覽器不能執(zhí)行其他網(wǎng)站的腳本。
想要做一個(gè)angular + nodejs 的登錄
需要解決的問題angular的4200端口 向 nodejs的8080端口 發(fā)送一個(gè)post請(qǐng)求, 這會(huì)造成跨域問題,
跨域，指的是瀏覽器不能執(zhí)行其他網(wǎng)站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器對(duì)javascript施加的安全限制
只有協(xié)議，域名，端口完全相同了才算同一個(gè)域，不同域之間不允許通信
jsonp 是一種解決方案, 但是 CORS 更優(yōu)雅
CORS 跨域資源共享（Cross-Origin Resource Sharing）
了解原理請(qǐng)移步 http://www.ruanyifeng.com/blo...
這里只講做法
nodejs 后端代碼
app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "*");
next();
});
解決一般的跨域,就這樣寫就夠了
默認(rèn)情況下，跨源請(qǐng)求不提供憑據(jù)(cookie、HTTP認(rèn)證及客戶端SSL證明等)，通過將withCredentials屬性設(shè)置為true，可以指定某個(gè)請(qǐng)求應(yīng)該發(fā)送憑據(jù)。
后端收到這種請(qǐng)求的時(shí)候, 不會(huì)檢測(cè) cookie 里面的數(shù)據(jù)
沒了 cookie session 自然也就無效了
如果你的請(qǐng)求需要使用到 cookie
前端angular需要這樣寫
// {withCredentials: true} withCredentials 表示是否傳遞憑證，就是cookie
this.http.get(this.hostName + "/captcha", {withCredentials: true}).subscribe((data) => {
});
后端也需要返回 cookie
res.header("Access-Control-Allow-Credentials", true);// Allow Cookie
app.use((req, res, next) => {
// req.headers.origin
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Credentials", true);// Allow Cookie
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
next();
});
這樣寫會(huì)報(bào)錯(cuò), 因?yàn)橛?cookie 的話, Access-Control-Allow-Origin 就不能寫 "*" 了
可以把 Access-Control-Allow-Origin 改成 訪問者的ip+端口, 如:
res.header("Access-Control-Allow-Origin", "http://localhost:4200");
但是, 訪問者是動(dòng)態(tài)的, 怎么知道訪問者的ip, req.headers.origin 就是訪問者的ip和端口
最終寫法
app.use((req, res, next) => {
// 需要使用cookie的話,是不能寫 * 的,必須寫具體的域, 像這樣
res.header("Access-Control-Allow-Origin", req.headers.origin);
res.header("Access-Control-Allow-Credentials", true);// Allow Cookie
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
next();
});
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/103050.html
摘要：本地安全問題在之前引入了本地這個(gè)東西，但是后面被廢除了，他的安全點(diǎn)和后臺(tái)數(shù)據(jù)庫的關(guān)注點(diǎn)差不多，就是要防止在數(shù)據(jù)中混入查詢指令。僵尸網(wǎng)絡(luò)風(fēng)險(xiǎn)中解決了單線程問題，提出了機(jī)制，它為提供多線程支持，但是多線程帶來了一個(gè)非?？膳碌奈ｋU(xiǎn)僵尸網(wǎng)絡(luò)。 HTML5 安全問題解析 標(biāo)簽： html html5 web安全 本文參考： w3school:html5相關(guān)基礎(chǔ)知識(shí)（w3school.com.c...
摘要：需注意的是由于同源策略的限制，所讀取的為跨域請(qǐng)求接口所在域的，而非當(dāng)前頁。目前，所有瀏覽器都支持該功能需要使用對(duì)象來支持，也已經(jīng)成為主流的跨域解決方案。反向代理接口跨域跨域原理同源策略是瀏覽器的安全策略，不是協(xié)議的一部分。 什么是跨域？ 跨域是指一個(gè)域下的文檔或腳本試圖去請(qǐng)求另一個(gè)域下的資源，這里跨域是廣義的。 廣義的跨域： 1.) 資源跳轉(zhuǎn)： A鏈接、重定向、表單提交 2.) 資源...
閱讀 720·2021-11-25 09:43
閱讀 2038·2021-11-17 09:33
閱讀 912·2021-09-07 09:58
閱讀 2140·2021-08-16 10:52
閱讀 543·2019-08-30 15:52
閱讀 1787·2019-08-30 15:43
閱讀 1188·2019-08-30 15:43
閱讀 2986·2019-08-29 16:41
