前端JS跨域请求处理全解析：CORS配置与JSONP实战
馃毃銆愮伒榄傛嫹闂€戜负浠€涔堜綘鐨凙JAX璇锋眰鎬昏娴忚鍣ㄦ嫤涓嬶紵
"鎴戞槑鏄庣収鐫€鏁欑▼鍐欑殑浠ｇ爜锛屾€庝箞鏁版嵁灏辨槸鎷夸笉鍒帮紵" 鏂版墜灏忕櫧鐨勪綘鐩潃鎺у埗鍙伴矞绾㈢殑鎶ラ敊淇℃伅锛屾槸涓嶆槸姘斿緱鎯虫妸閿洏鎽斾簡锛熷埆鎬ワ紝浠婂ぉ鍜变滑灏辨潵褰诲簳鎼炴噦杩欎釜纾ㄤ汉鐨勫皬濡栫簿鈥斺€旇法鍩熼棶棰橈紒
馃寪 璺ㄥ煙鍒板簳鏄粈涔堥锛?/h3>
锛堟姄鑰虫尃鑵級璇翠汉璇濆氨鏄細浣犲缃戠珯锛?span>http://www.aaa.com锛夋兂鍘婚殧澹佽€佺帇瀹讹紙http://www.bbb.com锛夊€熸妸铻轰笣鍒€锛堟暟鎹級锛屼絾娴忚鍣ㄤ繚瀹夎锛?涓嶈锛佷竾涓€鏄皬鍋峰亣瑁呯殑鎬庝箞鍔烇紵"
馃憠 鈥?strong>鈥嬩笁澶ф嫤璺檸鈥?/strong>鈥嬶細
- 鍗忚涓嶅悓锛坔ttp vs https锛?/li>
- 鍩熷悕涓嶅悓锛坅aa.com vs bbb.com锛?/li>
- 绔彛涓嶅悓锛?80 vs :8080锛?/li>
鍙纰颁竴涓氨绠楄法鍩燂紒灏卞儚浣犲幓灏忓尯瓒呭競涔颁笢瑗匡紝绐佺劧瑕佽繘闅斿灏忓尯鈥斺€斾繚瀹夊綋鐒惰鐩橀棶浣犲暒锛?/p>
馃洜锔?鐮村眬绁炲櫒CORS閰嶇疆
锛堟暡榛戞澘锛夎繖鏄幇鍦ㄦ渶姝ｇ粡鐨勮В鍐虫柟妗堬紒涓嶉渶瑕佷粈涔堥獨鎿嶄綔锛屾缁忎汉灏辩敤姝ｇ粡鏂规硶锝?/p>
馃幆 鎬庝箞鐜╄浆CORS锛?/h4>
- 鈥?strong>鈥嬪悗绔厤缃笁浠跺鈥?/strong>鈥嬶紙浠ode.js涓轰緥锛夛細
javascript澶嶅埗app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "https://your-site.com"); // 鎸囧畾鍙俊鍩熷悕
res.header("Access-Control-Allow-Methods", "GET,POST,PUT"); // 鍏佽鐨凥TTP鏂规硶
res.header("Access-Control-Allow-Headers", "Content-Type,Authorization"); // 鍏佽鐨勮姹傚ご
next();
});
- 鈥?strong>鈥嬪墠绔娉ㄦ剰鐨勫潙鈥?/strong>鈥嬶細
- 甯ookie璇锋眰瑕佽缃?code>withCredentials:true
- 澶嶆潅璇锋眰锛堟瘮濡侾UT/DELETE锛変細鍏堝彂OPTIONS棰勬璇锋眰
app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "https://your-site.com"); // 鎸囧畾鍙俊鍩熷悕
res.header("Access-Control-Allow-Methods", "GET,POST,PUT"); // 鍏佽鐨凥TTP鏂规硶
res.header("Access-Control-Allow-Headers", "Content-Type,Authorization"); // 鍏佽鐨勮姹傚ご
next();
});馃敟 鈥?strong>鈥嬬湡瀹炴渚嬧€?/strong>鈥嬶細鏌愮數鍟嗙綉绔欐帴鍏ユ敮浠樻帴鍙ｆ椂锛屽洜涓烘紡浜?code>Access-Control-Allow-Headers: X-Requested-With杩欎釜閰嶇疆锛屽鑷磇OS鐢ㄦ埛鍏紒閮紒澶憋紒璐ワ紒
馃す JSONP鐨勯噹璺瓙鐜╂硶
锛堟寫鐪夛級杩欐嫑閫傚悎瀵逛粯鑰佸彜钁ｆ帴鍙ｏ紝浣嗚浣忊€斺€旇繖涓嶆槸姝ｇ粡AJAX锛?/p>
鎬庝箞鎿嶄綔锛?/h4>
javascript澶嶅埗function handleData(data) {
console.log("鎷垮埌鏁版嵁鍟︼細", data);
}
// 鍔ㄦ€佸垱寤簊cript鏍囩
const script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleData';
document.body.appendChild(script);
馃挘 涓夊ぇ鑷村懡浼わ細
- 鍙兘鐢℅ET鏂规硶锛堜紶鍙傞暱搴︽湁闄愬埗锛?/li>
- 娌℃湁閿欒澶勭悊鏈哄埗锛堟帀绾夸簡閮戒笉鐭ラ亾锛?/li>
- 瀛樺湪XSS椋庨櫓锛堜竾涓€鎺ュ彛琚敞鍏ヤ簡鍛級
function handleData(data) {
console.log("鎷垮埌鏁版嵁鍟︼細", data);
}
// 鍔ㄦ€佸垱寤簊cript鏍囩
const script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleData';
document.body.appendChild(script);馃憠 鈥?strong>鈥嬮€傚悎鍦烘櫙鈥?/strong>鈥嬶細蹇€熷鎺ヨ€佹棫绯荤粺銆侀渶瑕佸吋瀹笽E8杩欑鍙よ懀娴忚鍣?/p>
馃啔 CORS vs JSONP 缁堟瀬瀵瑰喅
| 瀵规瘮椤?/th> | CORS | JSONP |
|---|---|---|
| 鈥?strong>鈥嬭姹傛柟寮忊€?/strong>鈥?/td> | 鏀寔鎵€鏈塇TTP鏂规硶 | 浠匞ET |
| 鈥?strong>鈥嬪畨鍏ㄦ€р€?/strong>鈥?/td> | 鍙厤缃櫧鍚嶅崟 | 鍏ㄩ潬鎺ュ彛鑹績 |
| 鈥?strong>鈥嬮敊璇鐞嗏€?/strong>鈥?/td> | 瀹屽杽鐨勭姸鎬佺爜鏈哄埗 | 闈犵寽 |
| 鈥?strong>鈥嬪吋瀹规€р€?/strong>鈥?/td> | IE10+ | 杩濱E6閮借兘璺?/td> |
| 鈥?strong>鈥嬫暟鎹牸寮忊€?/strong>鈥?/td> | 鏀寔鍚勭绫诲瀷 | 鍙兘鏄疛SONP鏍煎紡 |
锛堟媿澶ц吙锛夌幇鍦ㄧ煡閬撲负鍟ュぇ鍘傞兘鐢–ORS浜嗗惂锛熷畨鍏ㄥ張鐪佸績鍟婏紒
馃挕 鐙閬垮潙鎸囧崡
锛堟帍鍑哄皬鏈湰锛夎繖浜涜娉粡楠屽€煎崈閲戯細
- 鏈湴寮€鍙戞椂锛屽彲浠ュ湪Chrome鍚姩鍙傛暟鍔?code>--disable-web-security锛堜絾鍗冧竾鍒湪鐢熶骇鐜鐢紒锛?/li>
- 閬囧埌"棰勬璇锋眰涓嶉€氳繃"锛屽厛妫€鏌ユ槸涓嶆槸婕忎簡
OPTIONS鏂规硶鏀寔 - 璺ㄥ煙鍥剧墖/video鏍囩璧勬簮锛熻寰楀姞
crossorigin="anonymous"灞炴€?/li> - 鏈€鏂板彂鐜帮細2023骞碈hrome鏂板鐨?span>Private Network Access绛栫暐锛屼細璁﹍ocalhost璋冭瘯涔熷嚭鐜拌法鍩熼棶棰橈紒锛堣В鍐虫柟娉曪細鍚姩鏃跺姞
--allow-insecure-localhost锛?/li>
馃殌 鏈潵灞曟湜
锛堟帹鐪奸暅锛夌幇鍦ㄥ緢澶氭鏋堕兘鎶婅法鍩熷鐞嗗皝瑁呭緱濡堥兘涓嶈璇嗕簡銆傚儚Vue鐨刾roxy閰嶇疆銆丷eact鐨剆etupProxy.js锛屾湰璐ㄤ笂閮芥槸甯垜浠嚜鍔ㄦ悶瀹氫簡杩欎簺閰嶇疆銆備絾浣滀负寮€鍙戣€咃紝鍜辫繕鏄緱鎳傚師鐞嗕笉鏄紵
鏈€鍚庤鍙ユ帍蹇冪獫鐨勮瘽锛氳法鍩熷氨鍍忚皥鎭嬬埍锛屾棦瑕佷綘涓诲姩锛堟纭厤缃級锛屼篃瑕佸鏂归厤鍚堬紙鏈嶅姟绔敮鎸侊級銆傜幇鍦ㄧ煡閬撲笅娆¤鍒伴偅涓儲浜虹殑CORS閿欒璇ユ€庝箞鎼炲畾浜嗗惂锛熻刀绱у幓璇曡瘯锛?/p>
本文由嘻道妙招独家原创，未经允许，严禁转载