馃涓轰粈涔堜綘鐨勫墠绔竴璋冩帴鍙ｅ氨鎶ラ敊锛熸瘡娆＄湅鍒版帶鍒跺彴椋樼孩鐨?CORS閿欒"鏄笉鏄兂鐮搁敭鐩橈紵鍒厡锛佷粖澶╁挶浠敤澶х櫧璇濊亰鑱婅法鍩熶笁鍓戝锛屼繚浣犲崐灏忔椂浠庢嚨閫煎埌绮鹃€氾紒

涓€銆佽法鍩熷埌搴曟槸涓暐鐜╂剰锛?/h3>

璇寸櫧浜嗗氨鏄祻瑙堝櫒鍦?鎶ょ妸瀛?锛佷綘瀹剁殑缃戦〉鍦?code>http://a.com锛岄潪瑕佽皟鐢?code>http://b.com鐨勬帴鍙ｏ紝娴忚鍣ㄧ珛椹烦鍑烘潵锛?鍏勫紵锛屼綘杩欐簮閮戒笉涓€鑷达紝涓囦竴鏄挀楸肩綉绔欏拫鏁达紵" 鐩存帴缁欎綘鎶婅姹傛帎浜嗐€?/p>

馃攳鍚屾簮绛栫暐涓夋澘鏂?/h4>

1. 鈥?strong>鈥嬪崗璁笉鍚屸€?/strong>鈥嬶細http vs https
2. 鈥?strong>鈥嬪煙鍚嶄笉鍚屸€?/strong>鈥嬶細a.com vs b.com
3. 鈥?strong>鈥嬬鍙ｄ笉鍚屸€?/strong>鈥嬶細8080 vs 3000

涓句釜鏍楀瓙馃尠锛氫綘鏈湴寮€鍙戠敤localhost:5173璋?code>localhost:8080鐨勬帴鍙ｏ紝绔彛涓嶄竴鏍凤紵璺ㄥ煙娌¤窇锛?/p>

---

浜屻€丆ORS锛氱幇浠ｅ紑鍙戠殑瀹樻柟瑙ｅ喅鏂规

馃殌涓夋鎼炲畾CORS閰嶇疆

1. 鈥?strong>鈥嬪悗绔姞鍝嶅簲澶粹€?/strong>鈥嬶紙浠ode.js涓轰緥锛夛細

javascript澶嶅埗
app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "http://your-frontend.com")
  res.header("Access-Control-Allow-Methods", "GET,POST")
  res.header("Access-Control-Allow-Headers", "Content-Type")
  next()
})

1. 鈥?strong>鈥嬪甫cookie瑕佸姞鏂欌€?/strong>鈥嬶細

javascript澶嶅埗
// 鍓嶇
fetch(url, { credentials: 'include' })

// 鍚庣
res.header("Access-Control-Allow-Credentials", "true")

1. 鈥?strong>鈥嬮妫€璇锋眰鍒炕杞︹€?/strong>鈥嬶細閬囧埌PUT/DELETE杩欎簺"闈炲父瑙?鏂规硶锛屾祻瑙堝櫒浼氬厛鍙戜釜OPTIONS璇锋眰鎺㈣矾锛岃寰楀鐞嗭紒

鈿狅笍琛€娉暀璁細鍗冧竾鍒浘鐪佷簨鐩存帴璁?code>Access-Control-Allow-Origin: *杩樺甫Credentials锛屽垎鍒嗛挓琚畨鍏ㄥ洟闃熻鍠濊尪

涓夈€丣SONP锛氭棫鏃朵唬鐨勬洸绾挎晳鍥?/h3>

铏界劧鐜板湪涓嶆帹鑽愶紝浣嗕繚涓嶉綈鍝ぉ瑕佹帴鍙よ懀绯荤粺鍛紵鍘熺悊楠氬緱寰堚€斺€旂敤

本文由嘻道妙招独家原创，未经允许，严禁转载