前后端分离项目,如何解决跨域问题?

鍓嶅悗绔垎绂婚」鐩法鍩熼棶棰樻槸涓嶅彲閬垮厤鐨勩€傞€氬父鎯呭喌涓嬪墠绔敱React銆乂ue绛夋鏋剁紪鍐欙紝閫氳繃ajax璇锋眰鏈嶅姟绔疉PI锛屼紶杈撴暟鎹敤json鏍煎紡銆?img src=”https://p1.toutiaoimg.com/large/2b2990000702488e1937d” class=”syl-page-img” style=”height: auto;”>

閭d箞涓轰粈涔堟湁璺ㄥ煙鐨勯棶棰樺憿锛熻В鍐宠法鍩熼棶棰樻湁鍝簺鏂瑰紡锛熸悶娓呮杩欎袱涓棶棰樻垜浠渶瑕佷簡瑙d竴涓嬩粈涔堟槸鍚屾簮绛栫暐銆?/p>

娴忚鍣ㄧ殑鍚屾簮绛栫暐

鍚屾簮绛栫暐锛圫ame origin policy锛夋槸涓€绉嶅畨鍏ㄧ害瀹氾紝鏄墍鏈変富娴佹祻瑙堝櫒鏈€鏍稿績涔熸槸鏈€鍩烘湰鐨勫畨鍏ㄥ姛鑳戒箣涓€銆傚悓婧愮瓥鐣ヨ瀹氾細涓嶅悓鍩熺殑瀹㈡埛绔剼鏈湪娌℃湁鏄庣‘鎺堟潈鐨勬儏鍐典笅锛屼笉鑳借姹傚鏂圭殑璧勬簮銆傚悓婧愭寚鐨勬槸锛氬煙鍚嶃€佸崗璁€佺鍙e潎鐩稿悓銆?br class=”sysbr”>

姣斿鎴戜滑璁块棶涓€涓綉绔?/p>

http://www.test.com/index.html,

閭d箞杩欎釜椤甸潰璇锋眰濡備笅鍦板潃寰楁儏鍐垫槸杩欐牱鐨勶細

鍙﹀锛屽悓婧愮瓥鐣ュ張鍒嗗涓嬩袱绉嶆儏鍐碉細

  1. DOM鍚屾簮绛栫暐锛氱姝㈠涓嶅悓婧愮殑椤甸潰DOM杩涜鎿嶄綔锛屼富瑕侀槻姝frame鐨勬儏鍐点€傛瘮濡俰frame鏍囩閲屾斁涓€涓敮浠樺疂浠樻鐨勯〉闈紝濡傛灉娌℃湁鍚屾簮绛栫暐锛岄偅涔堥挀楸肩綉绔欓櫎浜嗗煙鍚嶄笉鍚岋紝鍏朵粬鐨勫垯鍙互鍜屾敮浠樺疂鐨勭綉绔欎竴妯′竴鏍枫€?br class=”sysbr”>

  2. XMLHttpRequest鍚屾簮绛栫暐锛氱姝娇鐢╔HR瀵硅薄鍚戜笉鍚屾簮鐨勬湇鍔″櫒鍙戣捣http璇锋眰銆傛瘮濡傜綉绔欒褰曚簡閾惰鐨刢ookie锛岃繖涓椂鍊欎綘璁块棶浜嗘伓鎰忕綉绔欙紝榛戝鎷垮埌浣犵殑cookie锛屽啀閫氳繃ajax璇锋眰涔嬪墠鐨勯摱琛岀綉绔欙紝渚垮彲浠ヨ交鏄撶殑鎷垮埌浣犵殑閾惰淇℃伅銆?/p>

鎵€浠ワ紝姝f槸鍥犱负鏈変簡鍚屾簮绛栫暐锛屽ぇ瀹剁殑缃戠粶鐜鎵嶇浉瀵圭殑瀹夊叏涓€浜涖€?/p>

璺ㄥ煙闂鐨勮В鍐冲姙娉?/h2>

浜嗚В浜嗗悓婧愮瓥鐣ワ紝灏辩煡閬撲负浠€涔堜細鏈夎法鍩熼棶棰樼殑浜х敓浜嗭紝閮芥槸涓轰簡瀹夊叏銆備絾鏄疄闄呯爺鍙戜腑锛屽ぇ瀹惰繕鏄渶瑕佽法鍩熷幓璁块棶璧勬簮銆傚吀鍨嬬殑搴旂敤鍦烘櫙灏辨槸鍓嶅悗绔垎绂荤殑椤圭洰浜嗐€傞偅涔堟垜浠浣曞幓瑙e喅璺ㄥ煙闂鍛紵

CORS-璺ㄥ煙璧勬簮鍏变韩

CORS鏄竴绉峎3C鏍囧噯锛屽畾涔変簡褰撲骇鐢熻法鍩熼棶棰樼殑鏃跺€欙紝瀹㈡埛绔笌鏈嶅姟绔浣曢€氫俊瑙e喅璺ㄥ煙闂銆傚疄闄呬笂灏辨槸鍓嶅悗绔害瀹氬ソ瀹氫箟涓€浜涜嚜瀹氫箟鐨刪ttp璇锋眰澶达紝璁╁鎴风鍙戣捣璇锋眰鐨勬椂鍊欒兘澶熻鏈嶅姟绔瘑鍒嚭鏉ヨ璇锋眰鏄繃杩樻槸涓嶈繃銆?br class=”sysbr”>

娴忚鍣ㄥ皢CORS璇锋眰鍒嗕负绠€鍗曡姹?/span>鍜?span>闈炵畝鍗曡姹傦細

绠€鍗曡姹?/span>

绠€鍗曡姹傚繀椤绘弧瓒充互涓嬩袱涓潯浠讹細

  1. 璇锋眰鏂瑰紡蹇呴』鏄疕EAD銆丟ET銆丳OST涓夌鏂规硶涔嬩竴銆?br class=”sysbr”>

  2. Http璇锋眰澶村繀椤诲彧鑳芥槸锛欰ccept銆丄ccept-Lanuage銆丆ontent-Lanuage銆丩ast-Event-ID銆丆ontent-Type锛屽叾涓瑿ontent-Type鍙檺浜庝笁涓€?
    application/x-www-form-urlencoded銆乵ultipart/form-data銆乼ext/plain銆?/span>

闈炵畝鍗曡姹?/h2>

涓嶆弧瓒崇畝鍗曡姹傛潯浠剁殑灏辨槸闈炵畝鍗曡姹傘€傞拡瀵归潪绠€鍗曡姹傦紝娴忚鍣ㄤ細鍙戣捣棰勬璇锋眰銆傞妫€璇锋眰鐨勬剰鎬濇槸褰撴祻瑙堝櫒妫€鏌ュ埌浣犵殑椤甸潰鍚湁璺ㄥ煙璇锋眰鐨勬椂鍊欙紝浼氬彂閫佷竴涓狾PTIONS璇锋眰缁欏搴旂殑鏈嶅姟鍣紝浠ユ娴嬫湇鍔″櫒鏄惁鍏佽褰撳墠鍩熷悕鐨勮法鍩熻姹傘€傚鏋滄湇鍔$鍏佽璇ュ煙鍚嶈姹傦紝鍒欒繑鍥?04鎴?00鐘舵€佺爜锛屾祻瑙堝櫒鎺ユ敹鍒板厑璁歌姹傛椂鍊欏啀缁х画鍙戦€佸搴旂殑GET/POST/PUT/DELETE璇锋眰銆傚悓鏃舵湇鍔″櫒绔篃浼氬憡鐭ユ祻瑙堝櫒棰勬璇锋眰鐨勭紦瀛樻椂闀挎槸澶氬皯锛屽湪杩欎釜鏃堕棿鑼冨洿鍐咃紝娴忚鍣ㄤ笉浼氬啀娆″彂璧烽妫€璇锋眰銆?/p>

鍘熺悊鍩烘湰涓婂氨鏄笂闈㈣鐨勮繖浜涳紝瀹為檯涓氬姟涓垜浠浣曢€氳繃閰嶇疆鏉ヨВ鍐宠法鍩熼棶棰樺憿锛熷熀鏈笂甯歌鐨勫氨鏄笁绉嶆柟寮忥細

nginx閰嶇疆

閫氬父鎴戜滑鍦╪ginx澧炲姞濡備笅閰嶇疆鍗冲彲瑙e喅璺ㄥ煙闂锛?/p>

鐢╪ginx杩欑鏂瑰紡鏄渶鑸掓湇鐨勶紝涓嶉渶瑕佸鎴风鍜屾湇鍔$澶氬仛鍏朵粬宸ヤ綔锛屽浠g爜鏃犲叆渚点€?/p>

jsonp

鍥犱负script鏍囩鏄笉鍙楁祻瑙堝櫒鍚屾簮绛栫暐鐨勫奖鍝嶏紝鍏佽璺ㄥ煙璇锋眰璧勬簮锛堟垜浠殑姣忎竴涓〉闈㈤兘寮曠敤浜嗗ぇ閲忕涓夋柟js鏂囦欢锛夈€傛墍浠ュ彲浠ュ埄鐢ㄥ姩鎬佸垱寤簊cript鏍囩锛岄€氳繃src灞炴€у彂璧疯法鍩熻姹傦紝杩欏氨鏄痡sonp鐨勫師鐞嗐€備絾鏄痡sonp鍙敮鎸丟ET璇锋眰锛屾墍浠ュ苟涓嶆槸涓€绉嶅ソ鐨勬柟寮忋€?br class=”sysbr”>

鏈嶅姟绔唬鐮佹帶鍒?/h2>

鍙互鍦ㄦ湇鍔$澧炲姞瀵硅法鍩熻姹傜殑鏀寔锛?br class=”sysbr”>

杩欑鏂瑰紡鐩稿綋浜庡叏灞€杩囨护鍣紝瀵规墍鏈夎姹傞兘杩囨护涓€閬嶃€?/p>

浠ヤ笂涓夌鏂瑰紡閮藉彲浠ヤ竴瀹氱▼搴︿笂瑙e喅璺ㄥ煙闂锛屼絾鏄痭ginx閰嶇疆鍜屾湇鍔$鎺у埗涓嶈兘鍚屾椂瀛樺湪锛屽惁鍒欎細鎶モ€?br>Access-Control-Allow-Origin Not Allow Multiple value鈥濈殑閿欒銆備釜浜烘瘮杈冩帹鑽恘ginx閰嶇疆鐨勬柟寮忥紝涓€鍔虫案閫革紝涓嶉渶瑕佹瘡涓獁eb椤圭洰閮藉幓缂栧啓璺ㄥ煙鐨勪唬鐮併€?/span>

澶у鍦ㄥ伐浣滀腑鏈夋病鏈夐亣鍒拌繃璺ㄥ煙闂鍛紵閮芥槸鎬庝箞瑙e喅鐨勶紵娆㈣繋璇勮鍖轰氦娴佽璁猴紝鍏卞悓瀛︿範~

鍦ㄥ墠鍚庣鍒嗙椤圭洰涓紝璺ㄥ煙闂寰堝父瑙併€傛垜涔嬪墠缁忓巻鐨勮緝澶х殑璺ㄥ煙闂鎶€鏈爤涓猴細spring boot + react 鍜?spring mvc + vue銆傝繖涓ゆ潯鎶€鏈爤锛屽湪涓嶅悓鏃舵湡鐨勭敓浜х幆澧冮兘鏈夊疄璺电殑缁忓巻銆傞拡瀵硅法鍩熼棶棰橈紝鏈€甯歌鐨勬湁涓夌瑙e喅鏂规锛屽嵆锛氭湇鍔$璁剧疆杩囨护鍣ㄥ厑璁歌法鍩熻闂紝閫氳繃ngix鍙嶅悜浠g爜瑙e喅璺ㄥ煙璁块棶锛屼娇鐢╦sonp鏀寔璺ㄥ煙璁块棶銆備笅闈㈡垜灏辫繖涓夌偣鍋氱畝鍗曢槓杩帮紝濡傛湁鍏跺畠鏂规锛屾杩庣暀瑷€琛ュ厖銆?/p>

鏈嶅姟绔缃繃婊ゅ櫒鍏佽璺ㄥ煙璁块棶銆傚湪spring boot 椤圭洰涓紝閰嶇疆杩囨护鍣ㄥ厑璁歌法鍩熻闂殑绀轰緥浠g爜濡備笅锛?/p>

/**

* 鍏ㄥ眬璺ㄥ煙閰嶇疆

*/

@Configuration

public class GlobalCorsConfig {

/**

* 鍏佽璺ㄥ煙璋冪敤鐨勮繃婊ゅ櫒

*/

@Bean

public CorsFilter corsFilter() {

CorsConfiguration config = new CorsConfiguration();

//鍏佽鎵€鏈夊煙鍚嶈繘琛岃法鍩熻皟鐢?/p>

config.addAllowedOrigin(“*”);

//鍏佽璺ㄨ秺鍙戦€乧ookie

config.setAllowCredentials(true);

//鏀捐鍏ㄩ儴鍘熷澶翠俊鎭?/p>

config.addAllowedHeader(“*”);

//鍏佽鎵€鏈夎姹傛柟娉曡法鍩熻皟鐢?/p>

config.addAllowedMethod(“*”);

UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

source.registerCorsConfiguration(“/**”, config);

return new CorsFilter(source);

}

}

鍦?Spring MVC 椤圭洰涓厤缃法鍩熻姹傜殑绀轰緥浠g爜濡備笅锛?/p>

public class SimpleCORSFilter implements Filter {

@Override

public void destroy() {

}

@Override

public void doFilter(ServletRequest req, ServletResponse res,

FilterChain chain) throws IOException, ServletException {

HttpServletResponse response = (HttpServletResponse) res;

response.setHeader(“Access-Control-Allow-Origin”, “*”);

response.setHeader(“Access-Control-Allow-Methods”, “POST, GET, OPTIONS, DELETE”);

response.setHeader(“Access-Control-Max-Age”, “3600”);

response.setHeader(“Access-Control-Allow-Headers”,” Origin, X-Requested-With, Content- Type, Accept”);

chain.doFilter(req, res);

}

@Override

public void init(FilterConfig arg0) throws ServletException {

}

}

<!– 璺ㄥ煙鏀寔 –>

<bean class=”com.jd.vbbman.regular.comb.interceptor.SimpleCORSFilter”/>

閫氳繃ngix鍙嶅悜浠g爜瑙e喅璺ㄥ煙璁块棶銆侼ginx瑙e喅璺ㄥ煙闂閫氳繃Nginx鍙嶅悜浠g悊灏嗗鐪熷疄鏈嶅姟鍣ㄧ殑璇锋眰杞Щ鍒版湰鏈烘湇鍔″櫒鏉ラ伩鍏嶆祻瑙堝櫒鐨?鍚屾簮绛栫暐闄愬埗”銆傚鐢ㄦ埛璁块棶localhost锛屽皢琚弽鍚戜唬鐞嗚嚦 http://api.weiyou.com

server {

listen 80;

server_name localhost;

## 鐢ㄦ埛璁块棶 localhost锛屽垯鍙嶅悜浠g悊鍒?http://api.weiyou.com

location / {

root html;

index index.html index.htm;

proxy_pass http://api.weiyou.com;

}

}

jsonp鏄埄鐢╯cript鏍囩鍙互寮曞叆澶栭儴璧勬簮锛屽苟灏嗗紩鍏ョ殑澶栭儴璧勬簮浣滀负js浠g爜瑙f瀽鐨勭壒鎬э紝鑾峰彇璺ㄥ煙璧勬簮銆?/p>

// jsonp灏佽

function jsonp({url,data={},seccess}){

var str = ”;

for(var i in data){

str += `${i}=${data[i]}&`;

}

var d = new Date();

var script = document.createElement(‘script’);

script.src = url + ‘?’ + str + ‘__qft’ + d.getTime();

document.body.appendChild(script);

window[data[data.fnName]] = function(res){

seccess(res);

}

}

//璋冪敤jsonp

jsonp(璇锋眰鐨勫湴鍧€,{鍙戦€佹暟鎹殑鍚嶅瓧锛氬彂閫佹暟鎹€?鍙戦€佹暟鎹殑鍚嶅瓧2锛氬彂閫佹暟鎹€?,…..},

function(res){

console.log(res);

}

)

浠ヤ笂涓夌鏂规锛屼粎瀵?Java 鏈嶅姟绔殑杩囨护鍣ㄩ厤缃В鍐虫柟妗堟湁瀹炶返锛屽叾浣欎袱绉嶆槸鎵惧鐨勭瓟妗堬紝鍏剁ず渚嬩唬鐮佺殑姝g‘鎬т笉鑳界‘璁ゃ€?/p>

浣滆€咃細澶曢槼闆ㄦ櫞锛屾杩庡叧娉ㄦ垜鐨勫ご鏉″彿锛氬伓灏旂編鏂囷紝涓绘祦Java锛屼负浣犺杩颁笉涓€鏍风殑鐮佸啘鐢熸椿銆?/strong>

鐜板湪寮€鍙戦」鐩紝澶ч儴鍒嗗叕鍙搁噰鐢ㄧ殑閮芥槸鍓嶅悗绔垎绂荤殑鏂瑰紡杩涜寮€鍙戯紝鐢变簬鐜板湪浜у搧褰㈡€佽秺鏉ヨ秺澶氾紝缃戦〉銆佹墜鏈虹銆佹闈㈢绛夌瓑锛屼负浜嗛潰瀵瑰悇绉嶇锛屾暟鎹腑蹇冨寲銆佸井鏈嶅姟姒傚康鐨勫嚭鐜帮紝鎴戜滑涓轰簡闆嗘垚杩欎簺鏈嶅姟锛屼笉寰椾笉鍘婚潰瀵逛竴涓父瑙佺殑闂鈥斺€旇В鍐宠法鍩熻姹傜殑闂銆?/p>

浠ュ墠宸ヤ綔寮€鍙戜腑锛岀粡甯镐細鏈夎繖鏍风殑闂锛屽墠绔伐绋嬪笀鐨勫墠绔〉闈㈢敱浜庤法鍩熼棶棰樻姤閿欎簡锛屾潵鍗忚皟鍚庣寮€鍙戜汉鍛樿В鍐筹紝鍚庡彴寮€鍙戜汉鍛樿繕閭hВ閲婁綘鏉ョ湅鎴戣繖杈圭殑鎺ュ彛鏄甯哥殑锛屽簲璇ユ槸浣犵殑闂锛岃繖鏄墠绔紑鍙戜汉鍛樼殑蹇冮】鏃舵槸宕╁鐨勶紝濡傛灉浣犺繕涓嶇煡閬撴€庝箞鍔炵殑鏃跺€欙紝涔熻浼氶粯榛樼殑鑷繁鍘诲鎵捐В鍐虫柟妗堬紝涓€鏌ヨВ鍐虫柟妗堬紝杩欎釜宸ヤ綔搴旇闇€瑕佸墠鍚庡彴涓€璧烽厤鍚堬紝浣犺繕寰楃粰鍚庣寮€鍙戜汉鍛樺幓濂借姝硅锛岃浠栦滑涔熺湅鐪嬩竴璧疯В鍐炽€傛垜寰堣兘鐞嗚В浣滀负鍓嶇鐨勬垜浠湡鏄笉瀹规槗鍟娿€?/p>

鍏充簬璺ㄥ煙杩欎釜闂锛屼笉浠呭墠绔伐绋嬪笀闇€瑕佷簡瑙o紝鍚庣宸ョ▼甯堜篃闇€瑕佷簡瑙f洿搴旇閲嶈锛屽洜涓哄悗闈細鎻愬強鍒扮浉鍏崇殑瑙e喅鏂规锛岄渶瑕佸叡鍚岄厤鍚堟墠鑳藉畬鎴愩€傚€熺潃鍥炵瓟杩欎釜闂鐨勬満浼氾紝鎴戞潵鎶婅法鍩熺殑鐩稿叧鍐呭杩涜绯荤粺鐨勬⒊鐞嗭紝鍒嗕韩缁欏ぇ瀹躲€?/p>

浠€涔堟槸璺ㄥ煙

璺ㄥ煙锛圕ORS锛夆€斺€旇法婧愯祫婧愬叡浜€傛崲鎴愭垜浠墠绔紑鍙戜汉鍛樿兘鐞嗚В鐨勫氨鏄寚娴忚鍣ㄤ笉鑳芥墽琛屽叾浠栫綉绔欑殑鑴氭湰銆傚畠鏄敱娴忚鍣ㄧ殑鍚屾簮绛栫暐閫犳垚鐨勶紝鏄祻瑙堝櫒瀵笿avaScript鐨勫疄鏂界殑瀹夊叏闄愬埗銆?/p>

鎹釜閫氫織鐨勬瘮鏂规潵璇达紝姣斿缁忓父浼氭湁涓€浜涙ā浠块噾铻嶆満鏋勭殑閽撻奔缃戠珯锛岀敤浜嗗拰閲戣瀺鏈烘瀯绫讳技鐨勫煙鍚嶏紝浣犵偣鍑昏繘鍘讳竴鐪嬶紝绔熺劧鍜屼綘鐔熸倝鐨勯噾铻嶇綉绔欎竴妯′竴鏍凤紝濡傛灉浣犳病娉ㄦ剰鍩熷悕鐨勫樊鍒紝濡傛灉浣犲湪缃戠珯涓婅緭鍏ヤ簡鍗″彿鍜屽瘑鐮佷俊鎭偅灏卞緢鍗遍櫓浜嗭紝鏈夊彲鑳借繖涓綉绔欐槸frame浜嗛噾铻嶆満鏋勭殑缃戠珯锛屽鏋滈噾铻嶇綉绔欐病鏈夊仛鐩稿叧鐨勫畨鍏ㄩ檺鍒讹紝浣犵殑淇℃伅瀹屽叏鏈夊彲鑳借闈炴硶鍒嗗瓙鑾峰彇銆傜敱姝ゅ彲瑙佹祻瑙堝櫒鐨勫悓婧愮瓥鐣ュ瓨鍦ㄦ槸鍗佸垎鏈夊繀瑕佺殑銆?/p>

鎴戦『渚垮湪缁欏ぇ瀹朵粙缁嶄笅濡備綍鍖哄垎鏄惁鏄悓婧愶紝鎵€璋撶殑鍚屾簮鏄寚锛屽煙鍚嶏紝鍗忚锛岀鍙e潎涓虹浉鍚屻€傛帴涓嬫潵涓惧嚑涓ず渚嬶紝鏂逛究澶у杩涜鐞嗚В锛?/p>

甯哥敤鏂规硶涓€锛氫娇鐢?JSONP 杩涜 Get 璇锋眰

杩欏簲璇ユ槸鎴戜滑鎺ヨЕ鍒扮殑绗竴涓В鍐宠法鍩熺殑鏂规硶锛岀瑪鑰呰寰楀墠绔叆闂ㄧ粡鍏哥孩鐨功閲屾湁杩囦粙缁嶏紝JSONP鏈変袱閮ㄥ垎涓绘垚锛氬洖璋冨嚱鏁板拰鏁版嵁銆傚洖璋冨嚱鏁版槸褰撳搷搴斿畬鎴愬湪椤甸潰涓皟鐢ㄧ殑鍑芥暟锛屽洖璋冨嚱鏁扮殑鍚嶅瓧涓€鑸湪璇锋眰涓繘琛屽埗瀹氥€傝€屾暟鎹氨鏄紶鍏ュ洖璋冨嚱璋冨嚱鏁颁腑鐨凧SON鏁版嵁銆備负浜嗚В閲婅繖涓紝杩樻槸鎴戜滑鏉ョ湅涓嬮潰杩欎釜渚嬪瓙鍚э細

姣斿鎴戜滑鏉ュ疄鐜颁竴涓幏鍙栧綋鍦板ぉ姘旀暟鎹殑鍔熻兘锛屾垜浠渶瑕佸湪鍚庣涓庡ぉ姘旀帴鍙e钩鍙颁氦浜掕幏鍙栧ぉ姘旀暟鎹紝鍓嶇椤甸潰閫氳繃GET鍚庣API鐨勬柟寮忚幏鍙栧ぉ姘斾俊鎭€?/p>

1銆侀鍏堝畾涔夋垜浠墠绔〉闈㈢殑鍥炶皟鍑芥暟鍔熻兘锛屾垜浠畾涔変簡涓€涓猤otWeather鐨勫嚱鏁帮細

2銆佹帴涓嬫潵瀹氫箟璇锋眰鏂规硶锛岃娉ㄦ剰callback鍚庨潰鐨勫弬鏁板拰鍥炶皟鍑芥暟淇濇寔涓€鑷寸殑鍚嶅瓧锛?/p>

3銆佹垜浠悗鍙版帴鍙f渶缁堣杩斿洖闈炵被浼艰繖鏍风殑鏁版嵁鍐呭锛?/p>

浣犱細鍙戠幇锛屾暟鎹兘澶熸甯歌繑鍥烇紝浣犱篃璁镐細闂负浠€涔堣繖鏍峰彲浠ワ紝涓嶈繚鑳屽悓婧愬師鍒欏悧锛熷叾瀹炰箣鎵€浠ユ湁鏁堬紝骞朵笖涓嶈繚鍙嶅畨鍏ㄦ€э紝鍥犱负杩欐槸缁忚繃鍓嶅悗绔叡鍚屽崗浣滐紝绾﹀畾浠ヨ繖绉嶆柟寮忎紶閫掓暟鎹€備絾鏄綘浼氬彂鐜颁娇鐢ㄨ繖绉嶆柟娉曚細鏈変竴涓棶棰樻槸锛屽彧鑳界敤浜嶨et璇锋眰銆?/p>

甯哥敤鏂规硶浜岋細璺ㄥ煙璧勬簮鍏变韩锛圕ORS锛夎姹傛柟寮?/h2>

鐩墠杩欑鏂瑰紡鐢ㄧ殑姣旇緝澶氾紝搴旂敤姣旇緝骞挎硾锛屽鏋滀綘鐨勯」鐩彈閮ㄧ讲鐜闄愬埗鐨勮瘽锛屽缓璁繕鏄敤杩欑銆?br class=”sysbr”>

1銆佷粈涔堟槸CORS锛?/span>

CORS鏄竴涓猈3C鏍囧噯锛屽叏绉版槸鈥滆法鍩熻祫婧愬叡浜€濓紙璺ㄦ簮璧勬簮鍏变韩锛夈€傚畠鍏佽娴忚鍣ㄥ悜璺ㄦ簮鏈嶅姟鍣紝鍙戝嚭XMLHttpRequest璇锋眰锛屼粠鑰屽厠鏈嶄簡AJAX鍙兘鍚屾簮浣跨敤鐨勯檺鍒躲€?/p>

CORS闇€瑕佹祻瑙堝櫒鍜屾湇鍔″櫒鍚屾椂鏀寔鐩墠锛屾墍鏈夋祻瑙堝櫒閮芥敮鎸佽鍔熻兘锛孖E娴忚鍣ㄤ笉鑳戒綆浜嶪E10.IE8 +锛欼E8 / 9闇€瑕佷娇鐢╔DomainRequest瀵硅薄鏉ユ敮鎸丆ORS銆?/p>

鏁翠釜CORS閫氫俊杩囩▼锛岄兘鏄祻瑙堝櫒鑷姩瀹屾垚锛屼笉闇€瑕佺敤鎴峰弬涓庛€傚浜庡紑鍙戣€呮潵璇达紝CORS閫氫俊涓庡悓婧愮殑AJAX閫氫俊娌℃湁宸埆锛屼唬鐮佸畬鍏ㄤ竴鏍枫€傛祻瑙堝櫒涓€鏃﹀彂鐜癆JAX璇锋眰璺ㄦ簮锛屽氨浼氳嚜鍔ㄦ坊鍔犱竴浜涢檮鍔犵殑澶翠俊鎭紝鏈夋椂杩樹細澶氬嚭涓€娆¢檮鍔犵殑璇锋眰锛屼絾鐢ㄦ埛涓嶄細鏈夋劅瑙夈€傚洜姝わ紝瀹炵幇CORS閫氫俊鐨勫叧閿槸鏈嶅姟鍣ㄣ€傚彧瑕佹湇鍔″櫒瀹炵幇浜咰ORS鎺ュ彛锛屽氨鍙互璺ㄦ簮閫氫俊銆?/p>

CORS 璇锋眰鍒嗘垚涓ょ被锛?span>绠€鍗曡姹傦紙simple request锛?/span>鍜?span>闈炵畝鍗曡姹傦紙not-so-simple request锛?/span>銆?/p>

2銆佷粈涔堟槸绠€鍗曡姹傦紵

2.1銆侀鍏堜粙缁嶄笅浠€涔堟槸绠€鍗曡姹傦紝璇锋眰鏂规硶鏄互涓嬭姹傛柟娉曪細

  • Head

  • Get

  • Post

2.2銆丠TTP 鐨勫ご淇℃伅涓嶈秴鍑轰互涓嬪嚑绉嶅瓧娈?

  • Accept

  • Accept-Language

  • Content-Language

  • Last-Event-ID

  • Content-Type锛氬彧闄愪簬涓変釜鍊?br>application/x-www-form-urlencoded銆乵ultipart/form-data銆乼ext/plain

鍑℃槸涓嶅悓鏃舵弧瓒充笂闈袱涓潯浠讹紝灏卞睘浜庨潪绠€鍗曡姹傘€備竴鍙ヨ瘽锛岀畝鍗曡姹傚氨鏄畝鍗曠殑 HTTP 鏂规硶涓庣畝鍗曠殑 HTTP 澶翠俊鎭殑缁撳悎銆?br class=”sysbr”>

2.2銆佺畝鍗曡姹傜殑澶ц嚧娴佺▼鎴戝仛涓嬭В閲婏細

鍔犲叆鎴戜滑鐨勪竴涓綉绔欓〉闈㈠湴鍧€闇€瑕佸幓璇锋眰涓€涓湇鍔$鐨凙PI锛岃繖涓〉闈㈢殑璇锋眰澶村彲鑳芥槸杩欐牱鐨勶細

涓婇潰鐨勫ご淇℃伅涓紝Origin瀛楁鐢ㄦ潵璇存槑锛屾湰娆¤姹傛潵鑷摢涓煙锛堝崗璁?+ 鍩熷悕 + 绔彛锛夈€傛湇鍔″櫒鏍规嵁杩欎釜鍊硷紝鍐冲畾鏄惁鍚屾剰杩欐璇锋眰銆?br class=”sysbr”>

濡傛灉Origin鎸囧畾鐨勬簮锛屼笉鍦ㄨ鍙寖鍥村唴锛屾湇鍔″櫒浼氳繑鍥炰竴涓甯哥殑 HTTP 鍥炲簲銆傛祻瑙堝櫒鍙戠幇锛岃繖涓洖搴旂殑澶翠俊鎭病鏈夊寘鍚?br>Access-Control-Allow-Origin瀛楁锛屽氨鐭ラ亾鍑洪敊浜嗭紝浠庤€屾姏鍑轰竴涓敊璇紝琚玐MLHttpRequest鐨刼nerror鍥炶皟鍑芥暟鎹曡幏銆傛敞鎰忥紝杩欑閿欒鏃犳硶閫氳繃鐘舵€佺爜璇嗗埆锛屽洜涓?HTTP 鍥炲簲鐨勭姸鎬佺爜鏈夊彲鑳芥槸200銆?/span>

濡傛灉Origin鎸囧畾鐨勫煙鍚嶅湪璁稿彲鑼冨洿鍐咃紝鏈嶅姟鍣ㄨ繑鍥炵殑鍝嶅簲锛屼細澶氬嚭鍑犱釜澶翠俊鎭瓧娈点€傚叿浣撶殑璇锋眰浜や簰娴佺▼濡備笅鍥炬墍绀猴細

濡傛灉涓€鍒囬『鍒╂甯哥殑璇濓紝浣犲氨浼氱湅鍒版湇鍔$涓€浜涜繑鍥炵殑澶翠俊鎭?/p>

3銆佷粈涔堟槸闈炵畝鍗曡姹?/span>

3.1銆?绠€鍗曠殑浠嬬粛涓嬩粈涔堟槸闈炵畝鍗曡姹傦紙not-so-simple request锛?/p>

闈炵畝鍗曡姹傛槸閭g瀵规湇鍔″櫒鎻愬嚭鐗规畩瑕佹眰鐨勮姹傦紝姣斿璇锋眰鏂规硶鏄疨UT鎴朌ELETE锛屾垨鑰匔ontent-Type瀛楁鐨勭被鍨嬫槸application/json銆?/p>

闈炵畝鍗曡姹傜殑 CORS 璇锋眰锛屼細鍦ㄦ寮忛€氫俊涔嬪墠锛屽鍔犱竴娆?HTTP 鏌ヨ璇锋眰锛岀О涓衡€滈妫€鈥濊姹傦紙preflight锛夈€傛祻瑙堝櫒鍏堣闂湇鍔″櫒锛屽綋鍓嶇綉椤垫墍鍦ㄧ殑鍩熷悕鏄惁鍦ㄦ湇鍔″櫒鐨勮鍙悕鍗曚箣涓紝浠ュ強鍙互浣跨敤鍝簺 HTTP 鍔ㄨ瘝鍜屽ご淇℃伅瀛楁銆傚彧鏈夊緱鍒拌偗瀹氱瓟澶嶏紝娴忚鍣ㄦ墠浼氬彂鍑烘寮忕殑XMLHttpRequest璇锋眰锛屽惁鍒欏氨鎶ラ敊銆傝繖鏄负浜嗛槻姝㈣繖浜涙柊澧炵殑璇锋眰锛屽浼犵粺鐨勬病鏈?CORS 鏀寔鐨勬湇鍔″櫒褰㈡垚鍘嬪姏锛岀粰鏈嶅姟鍣ㄤ竴涓彁鍓嶆嫆缁濈殑鏈轰細锛岃繖鏍峰彲浠ラ槻姝㈡湇鍔″櫒澶ч噺鏀跺埌DELETE鍜孭UT璇锋眰锛岃繖浜涗紶缁熺殑琛ㄥ崟涓嶅彲鑳借法鍩熷彂鍑虹殑璇锋眰銆?br class=”sysbr”>

3.2銆侀€氳繃绀轰緥锛屾垜浠潵浜嗚В鍏跺疄鐜扮殑鍘熺悊

3.2.1銆佹瘮濡傛垜浠湪鍓嶇椤甸潰鐨勮姹備唬鐮佹椂杩欐牱鐨勫涓嬫墍绀猴細

涓婇潰浠g爜涓紝HTTP 璇锋眰鐨勬柟娉曟槸PUT锛屽苟涓斿彂閫佷竴涓嚜瀹氫箟澶翠俊鎭疿-Custom-Header銆?/p>

3.2.2銆佹祻瑙堝櫒鍙戠幇锛岃繖鏄竴涓潪绠€鍗曡姹傦紝灏辫嚜鍔ㄥ彂鍑轰竴涓€滈妫€鈥濊姹傦紝瑕佹眰鏈嶅姟鍣ㄧ‘璁ゅ彲浠ヨ繖鏍疯姹傘€備笅闈㈡槸杩欎釜鈥滈妫€鈥濊姹傜殑 HTTP 澶翠俊鎭€?br class=”sysbr”>

鈥滈妫€鈥濊姹傜敤鐨勮姹傛柟娉曟槸OPTIONS锛岃〃绀鸿繖涓姹傛槸鐢ㄦ潵璇㈤棶鐨勩€傚ご淇℃伅閲岄潰锛屽叧閿瓧娈垫槸Origin锛岃〃绀鸿姹傛潵鑷摢涓簮銆?/p>

闄や簡Origin瀛楁锛屸€滈妫€鈥濊姹傜殑澶翠俊鎭寘鎷袱涓壒娈婂瓧娈点€?/p>

锛?锛?br>Access-Control-Request-Method 璇ュ瓧娈垫槸蹇呴』鐨勶紝鐢ㄦ潵鍒楀嚭娴忚鍣ㄧ殑 CORS 璇锋眰浼氱敤鍒板摢浜?HTTP 鏂规硶锛屼笂渚嬫槸PUT銆?/span>

锛?锛?br>Access-Control-Request-Headers 璇ュ瓧娈垫槸涓€涓€楀彿鍒嗛殧鐨勫瓧绗︿覆锛屾寚瀹氭祻瑙堝櫒 CORS 璇锋眰浼氶澶栧彂閫佺殑澶翠俊鎭瓧娈碉紝涓婁緥鏄疿-Custom-Header銆?/span>

3.3銆佹湇鍔″櫒鏀跺埌鈥滈妫€鈥濊姹備互鍚庯紝妫€鏌ヤ簡Origin銆?br>Access-Control-Request-Method鍜?br>Access-Control-Request-Headers瀛楁浠ュ悗锛岀‘璁ゅ厑璁歌法婧愯姹傦紝灏卞彲浠ュ仛鍑哄洖搴斻€?/span>

3.4 涓€鏃︽湇鍔″櫒閫氳繃浜嗏€滈妫€鈥濊姹傦紝浠ュ悗姣忔娴忚鍣ㄦ甯哥殑 CORS 璇锋眰锛屽氨閮借窡绠€鍗曡姹備竴鏍凤紝浼氭湁涓€涓狾rigin澶翠俊鎭瓧娈点€傛湇鍔″櫒鐨勫洖搴旓紝涔熼兘浼氭湁涓€涓?br>Access-Control-Allow-Origin澶翠俊鎭瓧娈点€?/span>

3.4 鏂囧瓧鍐呭鏈夌偣澶氾紝鎶婂垰鎵嶆弿杩扮殑鍐呭鐢ㄤ竴寮犳祦绋嬪浘琛ㄨ堪涓嬶紝澶у浼氭竻鏅拌澶氾紝濡備笅鎵€绀猴細

4銆佷笌 JSONP 鐨勬瘮杈?/span>

CORS 涓?JSONP 鐨勪娇鐢ㄧ洰鐨勭浉鍚岋紝浣嗘槸姣?JSONP 鏇村己澶с€侸SONP 鍙敮鎸丟ET璇锋眰锛孋ORS 鏀寔鎵€鏈夌被鍨嬬殑 HTTP 璇锋眰銆侸SONP 鐨勪紭鍔垮湪浜庢敮鎸佽€佸紡娴忚鍣紝浠ュ強鍙互鍚戜笉鏀寔 CORS 鐨勭綉绔欒姹傛暟鎹€?/p>

5銆佹帴涓嬫潵缁欏悗绔紑鍙戜汉鍛樺垎浜笅濡備綍閰嶇疆璺ㄥ煙璇锋眰


5.1 PHP 绠€鍗曠ず渚?/p>

5.2 Node 寮€鍙戜汉鍛樹娇鐢?Express 绠€鍗曠ず渚嬶細

5.2.1 棣栧厛瀹夎 cors 涓棿浠讹細

npm install cors

5.2.3 鐒跺悗閰嶇疆姣斿鍏ュ彛鏂囦欢锛宻erver/

index.js

5.2.4 浣犲彲浠ュ璺ㄥ煙杩涜閰嶇疆锛屽涓嬪浘鎵€绀猴細

5.2.5 浣犲彲浠ュ仛涓姹傜ず渚嬪皾璇曚笅锛屽鏋滀竴鍒囨甯革紝浣犲彲浠ュ湪 web 寮€鍙戣€呭伐鍏蜂腑鐪嬪埌濡備笅鎵€绀猴細

java 鐨勭敱浜庢垜涓嶅お鐔燂紝鍙互鑷瑙e喅鏂规锛屽師鐞嗗拰 PHP 鐨勯亾鐞嗘槸宸笉澶氱殑銆?/p>

甯哥敤鏂规硶涓夛細nginx 鍙嶅悜浠g悊

杩欎釜鏂规硶搴旂敤涔熷崄鍒嗗箍娉涳紝涔熸槸鍗佸垎甯歌鐨勶紝杩欎篃闇€瑕佹湇鍔$閰嶅悎涓嬮潰杩樻槸鐢ㄤ竴娈礜gxin閰嶇疆鏉ヨ鏄庤繖涓棶棰橈紝濡備笅鍥炬墍绀猴細

瀹炵幇鍘熺悊绫讳技浜嶯ode涓棿浠朵唬鐞嗭紝闇€瑕佷綘鎼缓涓€涓腑杞琻ginx鏈嶅姟鍣紝鐢ㄤ簬杞彂璇锋眰銆備娇鐢╪ginx鍙嶅悜浠g悊瀹炵幇璺ㄥ煙锛屾槸鏈€绠€鍗曠殑璺ㄥ煙鏂瑰紡銆傚彧闇€瑕佷慨鏀筺ginx鐨勯厤缃嵆鍙В鍐宠法鍩熼棶棰橈紝鏀寔鎵€鏈夋祻瑙堝櫒锛屾敮鎸乻ession锛屼笉闇€瑕佷慨鏀逛换浣曚唬鐮侊紝骞朵笖涓嶄細褰卞搷鏈嶅姟鍣ㄦ€ц兘銆傚疄鐜版€濊矾锛氶€氳繃nginx閰嶇疆涓€涓唬鐞嗘湇鍔″櫒锛堝煙鍚嶄笌domain1鐩稿悓锛岀鍙d笉鍚岋級鍋氳烦鏉挎満锛屽弽鍚戜唬鐞嗚闂甦omain2鎺ュ彛锛屽苟涓斿彲浠ラ『渚夸慨鏀筩ookie涓璬omain淇℃伅锛屾柟渚垮綋鍓嶅煙cookie鍐欏叆锛屽疄鐜拌法鍩熺櫥褰曘€?/p>

灏忚妭

浠ヤ笂鏄В鍐宠法鍩熼棶棰樻渶甯哥敤鐨勪笁绉嶆柟寮忥紝搴旇鑳借В鍐充綘涓氬姟涓亣鍒扮殑闂锛屾湁鐐归渶闇€瑕佹彁绀虹殑鏄柟娉曚簩鍜屾柟娉曚笁涓嶈娣风潃鐢紝鍚﹀垯浼氭姤鈥?br>Access-Control-Allow-Origin Not Allow Multiple value鈥濈殑閿欒锛屾垜鎺ㄨ崘澶у鐢ㄦ柟娉曚笁浣跨敤nginx鍙嶅悜浠g悊鍋氳法鍩熻В鍐虫柟妗堬紝姣旇緝绠€鍗曞拰鐩存帴锛屽彲璋撲竴鍔虫案閫搞€傚綋鐒惰法鍩熺殑鏂规硶杩樻湁鍏朵粬鐨勶紝姣斿浣跨敤WebSocket銆乸ostMessage API 銆佸悇绉?iframe 鐨勮В鍐虫柟妗堬紝鐢变簬涓嶅お甯哥敤鍜岀瘒骞呴棶棰樺師鍥狅紝灏变笉鍐嶄竴涓€浠嬬粛浜嗭紝鎰熷叴瓒g殑灏忎紮浼翠滑鍙互鑷鎼滅储銆?/span>

濡傛灉浣犺寰楁湰鍥炵瓟鍒嗕韩瀵逛綘鏈夋墍甯姪锛?span>娆㈣繋缁欎釜璧烉煈嶆敮鎸佷笅锛屽垎浜嚭鍘昏鏇村鐨勪汉鐭ラ亾锛屽鏋滀綘鏈夊叾瀹冪殑鏂规硶锛屾杩庡啀鐣欒█鍖鸿繘琛屽垎浜€?/p>

娉細鏈洖绛旂浜岄儴閮ㄥ垎鍙傝€冮槷涓€宄扮殑銆奐avaScript 鏍囧噯鍙傝€冩暀绋嬶紙alpha锛夈€?/p>

鏇村鍓嶇鍐呭鍒嗕韩锛屾杩庡叧娉ㄣ€屽墠绔揪浜恒€嶅強鍏跺井淇″叕浼楀彿

寰堥珮鍏磋兘澶熺湅鍒板拰鍥炵瓟杩欎釜闂锛?/strong>

鎬诲伐绋嬪笀璐熻矗鍑嗗HTML椤甸潰锛屽畬鎴愪富椤电殑璁捐銆傚崗璋冨伐绋嬪笀閲囩敤妯℃澘娉曞皢html椤甸潰杞崲涓洪〉闈spx锛屽苟鍐呯疆浠g爜Asp.net);鍓嶅彴鍜屽悗鍙扮殑鏀寔鍔涘害澶э紝鍚庡彴瑕佺瓑鍒板紑鍙戝垵鏈熷皢html寰堝ソ鐨勮浆鎹负aspx銆?strong>濡傛灉闇€姹傚彂鐢熷彉鍖栵紝闇€瑕佷慨鏀笻TML妯″潡锛屼篃闇€瑕佷慨鏀筧spx妯″潡銆傝繖鏄竴涓笌闄嶄綆寮€鍙戞晥鐜囧瘑鍒囩浉鍏崇殑闂銆傚湪浜や粯浜у搧鐨勬椂鍊欙紝涓€瀹氳鎶婂墠鍚庢墍鏈夌殑浠g爜鎵撳寘锛屾妸浠g爜鏀惧湪鍚屼竴涓湇鍔″櫒涓婏紝鎴栬€呭共鑴嗘斁鍦ㄩ潤鎬佹ā寮忎笅銆?/strong>

浠€涔堟槸璺ㄥ煙锛?/h2>

娴忚鍣ㄧ璇锋眰涓嶅悓鍩熷悕鐨勮祫婧愭祻瑙堝櫒绔?/p>

鍙槸娴忚鍣ㄧ殑瀹夊叏闄愬埗绛栫暐锛孋URL鏃犳闂涓嶅悓鍩熷悕

瀛愬煙鍚嶄篃绠楋紝绔彛涓嶅悓涔熺畻娉ㄦ剰锛欳ookie鍙尯鍒嗗煙鍚嶏紝涓嶅尯鍒嗙鍙o紒

鍓嶅悗绔垎绂婚」鐩紝濡備綍瑙e喅璺ㄥ煙闂锛?/h2>

瑙e喅鏂规涓€锛欽SONP鍘熺悊

HTML涓殑<script>鏍囩鍙互璺ㄥ煙鍔犺浇锛屽姞杞藉畬鎴愬悗绔嬪嵆鎵ц銆?/p>

<script src=”XXXX/XXXX.js”></script>

瀹炵幇锛?/p>

鍑嗗涓€涓叏灞€Function锛屾瘮濡俢allback1230鍔ㄦ€佸鍔犱竴涓?lt;script src=”API鍦板潃锛焎allback=callback123″></script>

杩斿洖鐨勫唴瀹癸細callback123锛坽DATA..鈥锛?/p>

瑙e喅鏂规2锛欳ORS鍘熺悊

W3C鏂版爣鍑嗭細

鍝嶅簲鐨勫ご涓彧瑕佸寘鍚?br>Access-Control-Allow-Origin锛氬煙鍚?锛屽煙鍚?娴忚鍣ㄥ杩欎簺鍩熷悕灏变笉浼氶檺鍒惰法鍩?/span>

杩樺彲浠ヤ娇鐢ㄩ€氶厤绗?

瀹炵幇锛?/p>

Server鎴杗ginx鍔燞eader

瑙e喅鏂规2锛氬叡浜櫥褰曟€?/strong>

Session瀛楥ookie锛堝姞瀵嗭級锛屾寕鍦╨ivechart.cn鐨勬牴鍩熷悕涓?涓姞瀵嗗瓧娈碉細userld锛寀serldMd5鐢ㄤ簬鍏跺畠鍚庡彴鏈嶅姟瑙f瀽鐧诲綍鎬侊紝鍓嶅彴鏃犳硶瑙f瀽1涓叕寮€瀛楁锛歶serName鍙奖鍝嶅墠鍙版樉绀猴紝涓嶅奖鍝嶄换浣曞悗鍙伴€昏緫銆?/p>

鍓嶅悗鍔炲叕宸茬粡鎴愪负浜掕仈缃戝紑鍙戦」鐩殑鏍囧噯浣跨敤褰㈠紡銆備紶缁熺殑娣峰悎寮€鍙戞ā寮忚櫧鐒剁粡鍙椾綇浜嗚€冮獙锛屼粛鐒跺彲浠ユ敮鎾戝簲鐢ㄧ殑寮€鍙戙€備絾鍦ㄦ湭鏉ワ紝绀句細鍒嗗伐灏嗘洿鍔犵粏鍖栵紝寮€鍙戝墠鍚庡垎绂绘槸蹇呯劧瓒嬪娍銆傛澶栵紝鍓嶅悗绔垎绂诲皢涓哄悗缁ぇ瑙勬ā鍒嗗竷寮忕粨鏋勩€佸井鏈嶅姟缁撴瀯銆佸鏋佹湇鍔★紙濡傛祻瑙堝櫒銆佸嚖灏鹃奔銆両0S銆佺粓绔瓑锛夋墦涓嬪潥瀹炲熀纭€銆?/p>

浠ヤ笂渚挎槸鎴戠殑涓€浜涜瑙e拰鍥炵瓟锛屽彲鑳戒笉鑳藉鎮ㄦ墍鎰匡紝浣嗘垜鐪熷績甯屾湜鑳藉瀵规偍鏈夋墍甯姪锛佷笉娓呮鐨勫湴鏂规偍杩樺彲浠ュ叧娉ㄦ垜鐨勫ご鏉″彿鈥滄瘡鏃ョ簿褰╃鎶€鈥濇垜灏嗙灏芥墍鐭ュ府鍔╂偍锛?/p>

鐮佸瓧涓嶆槗锛屾劅瑙夊啓鐨勮繕琛岀殑璇濓紝杩樿鐐逛釜璧炲摝锛?/p>

鍓嶅悗绔垎绂婚」鐩紝濡備綍瑙e喅璺ㄥ煙闂锛?/strong>

涓€锛屼粈涔堟槸璺ㄥ煙锛屾€庝箞澶氫簡涓€涓狾PTIONS璇锋眰锛?/strong>

浜岋紝鏈嶅姟绔浣曞搷搴擮PTIONS璇锋眰锛屽憡璇夊鎴风鏄惁鍏佽璺ㄥ煙锛?/strong>

涓夛紝寮€婧愰」鐩疄渚嬩唬鐮?/strong>


涓€锛屼粈涔堟槸璺ㄥ煙锛屾€庝箞澶氫簡涓€涓狾PTIONS璇锋眰锛?/strong>

鍦ㄥ墠鍚庣鍒嗙鏋舵瀯涓嬶紝瀹㈡埛绔皟鐢ˋPI鎺ュ彛鏈嶅姟锛岃幏鍙栨暟鎹綍鏈嶅姟绔畬鎴愪氦浜掋€傚鏋滀娇鐢ㄦ祻瑙堝櫒鏌ョ湅API璋冪敤淇℃伅锛屽氨浼氬彂鐜板浜嗕竴涓狾PTIONS鎺ュ彛璇锋眰銆?/p>

OPTIONS璇锋眰鏄仛浠€涔堢敤鐨勫憿锛?/p>

鍦ㄨ法鍩熻祫婧愬叡浜椂锛屼负浜嗕繚闅滄湇鍔$瀹夊叏锛屼簬鏄嚭鐜颁簡CORS锛屼竴涓猈3C鏍囧噯锛屽畾涔変簡褰撲骇鐢熻法鍩熼棶棰樼殑鏃跺€欙紝瀹㈡埛绔笌鏈嶅姟绔浣曡繘琛岄€氫俊鏉ヨВ鍐宠法鍩熼棶棰樸€?/p>

CORS鏍囧噯绾﹀畾浜嗗墠鍚庣澧炲姞鐨勮嚜瀹氫箟HTTP璇锋眰澶达紝褰撳鎴风鍙戣捣璇锋眰鏃讹紝鏈嶅姟绔繘琛岃瘑鍒紝鍐冲畾璇ヨ姹傛槸鍚﹁鍏佽銆?/p>

鑾峰彇鏄笉鏄鍏佽璋冪敤鐨勮繖娆¤姹傦紝灏辨槸瀹㈡埛绔疧PTIONS璇锋眰锛岄€氬父鐢辨祻瑙堝櫒鑷姩鍙戣捣锛屼笉闇€瑕佽嚜宸卞啓浠g爜瀹炵幇璋冪敤閫昏緫銆?

浜岋紝鏈嶅姟绔浣曞搷搴擮PTIONS璇锋眰锛屽憡璇夊鎴风鏄惁鍏佽璺ㄥ煙锛?/strong>

鏈夊洖绛旂粰鍑轰簡Nginx娣诲姞璇锋眰澶翠俊鎭殑瀹炵幇鏂瑰紡锛岃繖閲岄拡瀵规湇鍔$浠g爜瀹炵幇缁欏嚭鍏蜂綋鏂规硶銆?

/**
* 瀵硅法鍩熸彁渚涙敮鎸?br class=”sysbr”> */
@Override
protected boolean preHandle(ServletRequest request, ServletResponse response) throws Exception {
HttpServletRequest httpServletRequest = (HttpServletRequest) request;
HttpServletResponse httpServletResponse = (HttpServletResponse) response;

httpServletResponse.setHeader(“
Access-control-Allow-Origin”,
httpServletRequest.getHeader(“Origin”));


httpServletResponse.setHeader(“
Access-Control-Allow-Methods”, “GET,POST,OPTIONS,PUT,DELETE”);


httpServletResponse.setHeader(“
Access-Control-Allow-Headers”,
httpServletRequest.getHeader(“
Access-Control-Request-Headers”));


// 鏄惁鍏佽鍙戦€丆ookie锛岄粯璁ookie涓嶅寘鎷湪CORS璇锋眰涔嬩腑銆傝涓簍rue鏃讹紝琛ㄧず鏈嶅姟鍣ㄥ厑璁窩ookie鍖呭惈鍦ㄨ姹備腑銆?br class=”sysbr”>
httpServletResponse.setHeader(“
Access-Control-Allow-Credentials”, “true”);


// 璺ㄥ煙鏃朵細棣栧厛鍙戦€佷竴涓猳ption璇锋眰锛岃繖閲屾垜浠粰option璇锋眰鐩存帴杩斿洖姝e父鐘舵€?br class=”sysbr”> if (
httpServletRequest.getMethod().equals(
RequestMethod.OPTIONS.name())) {


httpServletResponse.setStatus(HttpStatus.OK.value());

return false;
}

return super.preHandle(request, response);
}

浠g爜瑕佺偣锛氳繑鍥炲厑璁稿墠绔皟鐢ㄦ椂浼犻€掔殑璇锋眰澶淬€丆ookie銆佸煙鍚嶇瓑淇℃伅銆?

涓夛紝寮€婧愰」鐩疄渚嬩唬鐮?/strong>

JeecgBoot浣庝唬鐮佸紑鍙戞鏋讹紝鍩轰簬浠g爜鐢熸垚鍣紝蹇€熷紑鍙戜笟鍔″簲鐢ㄧ郴缁燂紝寮€婧愬厤璐癸紝Java + Spring Boot鍏ㄥ妗躲€?/p>

寮€婧愬崗璁細 Apache-2.0

椤圭洰鍦板潃锛氫唬鐮佹墭绠″湪Github鍜孏itee锛屽浗鍐呯敤鎴蜂娇鐢℅itee涓嬭浇閫熷害蹇?/p>

绯荤粺鐜锛歐in10/Ubuntu锛孞DK8锛宮aven锛宯ode锛宒ocker

渚濊禆鏈嶅姟锛歁ySQL锛孯edis锛孉ctiveMQ


鎴戞槸婧愮爜鎺э紝Jext鎶€鏈ぞ鍖哄垱濮嬩汉锛屽垱涓氬叕鍙窩TO锛屽弬涓?涓紑婧愰」鐩紝鎶€鏈笓鏍忎綔鑰咃紝杈撳嚭鎶€鏈湇鍔★紝甯姪鏃╂湡鍒濆垱鍥㈤槦1涓湀涓婄嚎MVP锛屽揩閫熼獙璇佸晢涓氭ā寮忋€?/u>

1锛屽垎浜蒋浠剁爺鍙戠煡璇嗗拰缁忛獙

2锛屾惌寤哄拰绠$悊鎶€鏈洟闃燂紝楂樻晥鐜囷紝楂樹骇鍑?/u>

3锛屽疄璺佃蒋浠跺伐绋嬬悊蹇碉紝瀹炶返浜戝師鐢熷拰DevOps锛屽揩閫熶笂绾縈VP楠岃瘉鍟嗕笟妯″紡

璇村埌璺ㄥ煙闂锛屽厛瑕佽url鐨勭粍鎴愶紝url鏄敱鍗忚 + 鍩熷悕锛堝瓙鍩熷悕 + 涓诲煙鍚嶏級 + 绔彛鍙?+ 璧勬簮鍦板潃缁勬垚鐨勩€傞櫎璧勬簮鍦板潃澶栦换浣曚竴澶勪慨鏀归兘鍙瀹氫负璺ㄥ煙銆?/p>

璺ㄥ煙闂鏄祻瑙堝櫒鍜屾湇鍔″櫒鍏卞悓浣滅敤鐨勫畨鍏ㄧ瓥鐣ワ紝闇€瑕佹祻瑙堝櫒鍜屾湇鍔″櫒鍙屾柟涓€璧锋惡鎵嬫墠鑳借捣鍒颁綔鐢ㄣ€備氦浜掕繃绋嬭涓嬪浘锛?/p>

娴忚鍣ㄨ法鍩熶氦浜掕繃绋?/p>

鍝簺鎯呭喌鍙互琚瀹氫负璺ㄥ煙鍛紵

1銆佸煙鍚嶄笉涓€鑷达紝鎵撳紑椤甸潰鏄痑.com涓嬬殑锛岃法鍩熷埌b.com涓嬭姹傛暟鎹€?/p>

2銆佺鍙d笉涓€鑷达紝鎵撳紑椤甸潰鏄痑.com涓?0绔彛鐨勶紝璺ㄥ煙鍒癰.com涓?0绔彛璇锋眰鏁版嵁銆?/p>

3銆佸崗璁笉涓€鑷达紝鎵撳紑椤甸潰鏄痟ttp://a.com锛岃法鍩熷埌ws://a.com涓嬭姹傛暟鎹€?/p>

4銆乆HR璇锋眰锛宎jax鐨刋HR璇锋眰涔熶細琚瀹氫负璺ㄥ煙銆?/p>

瑙e喅鎬濊矾锛?/p>

1銆佹洿鏀规湇鍔″櫒璁剧疆锛屼笉妫€鏌ユ槸鍚﹁法鍩燂紝鐩存帴鏀捐銆?/p>

2銆佹洿鏀逛唬鐞嗘湇鍔″櫒鐨勮缃紝杩涜璺ㄥ煙鐨勫弽鍚戜唬鐞嗐€?/p>

3銆佷娇鐢╦sonp杩涜ajax鐨勫彂閫侊紝杩欐牱灏变笉浼氫骇鐢熻法鍩熼棶棰樸€?/p>

php绋嬪簭澶勭悊鏂瑰紡鏄湪浠g爜涓坊鍔犲涓嬭鍙ワ細

header(“”Access-Control-Request-Methods:GET, POST, PUT, DELETE, OPTIONS”“);

header(“’Access-Control-Allow-Headers:x-requested-with,content-type,test-token,test-sessid’“);

java澶勭悊涓婅繖閲屼妇渚媠pring boot涓殑涓€绉嶆柟寮忥紝灏辨槸鍦╟ontroller涓被涓婃坊鍔燖CrossOrigin娉ㄩ噴銆傛牱渚嬩唬鐮佸涓嬶細

@RequestMapping(“/test”)

@RestController

@CrossOrigin

public class CorsController {

@GetMapping(“/test”)

public String test() {

return “test”;

}

}

棣栧厛璇翠竴涓嬶紝璺ㄥ煙瀹冧笉鏄竴涓棶棰橈紝瀹冩槸娴忚鍣ㄧ殑涓€绉嶅畨鍏ㄧ瓥鐣ワ紝鍙悓婧愮瓥鐣ャ€傛嬁鍓嶅悗绔垎绂婚」鐩潵璇达紝鍓嶇璋冭瘯鎴栬€呴儴缃茬殑鍦板潃锛屼笌api鐨勫湴鍧€锛屽繀椤绘嫢鏈夌浉鍚岀殑鍗忚銆佸煙鍚嶃€佺鍙e彿銆傚惁鍒欙紝鍓嶇璇锋眰鍚庣鐨勬帴鍙d細鎶ラ敊銆?/p>

濡備綍瀹炵幇璺ㄥ煙鍛紵

寰堝鏂囩珷閮芥湁浠嬬粛锛屼娇鐢╦sonp銆乧ors鏈嶅姟绔厤缃€佷唬鐞嗙瓑绛夛紝jsonp杩欑榛戠鎶€杩樻槸灏介噺涓嶇敤鍚э紝鏈夊緢澶х殑灞€闄愭€э紝骞朵笖鍓嶅悗绔敼鍔ㄩ兘姣旇緝楹荤儲銆?/p>

浠庨」鐩疄璺电殑瑙掑害鏉ヨ锛屽墠鍚庣鍒嗙椤圭洰搴旇杩欐牱瀹炵幇璺ㄥ煙锛?/p>

寮€鍙戦樁娈碉紝浠庢垜甯﹁繃鐨勯」鐩彂鐜帮紝寰堝鏃跺€欏墠绔細瑕佹眰鍚庣閰嶇疆cors璇锋眰澶达紝鐒跺悗鍚庣鏃犺剳鐨勮缃?br>Access-Control-Allow-Origin: *锛屼笂绾跨殑鏃跺€欏甫鏉ュ緢澶х殑瀹夊叏闅愭偅銆傛纭殑濮垮娍搴旇鏄墠绔潵瑙e喅锛屽墠绔皬鐧藉彲鑳芥儕鍛嗕簡锛屽拫瑙e喅鍟婏紵鍓嶇妗嗘灦vue銆乺eact閮芥彁渚涗簡浠g悊鍔熻兘锛岄厤缃畃roxy閫夐」灏卞ソ浜嗭紝鍏蜂綋鎬庝箞閰嶇疆鍓嶇鑷繁鍘绘煡鏌ワ紝妗嗘灦鐨勫畼鏂规枃妗i兘鏈変粙缁嶃€?/span>

姝e紡涓婄嚎锛岃繖涓椂鍊欓€氬父浣跨敤浠g悊锛屽墠绔姹傛帴鍙e湴鍧€涓€寰嬩娇鐢ㄥ綋鍓嶅煙鍚嶄笅鐨?api/xxx/xxx銆傜劧鍚庨厤缃畐eb鏈嶅姟鍣紝瀵?api/寮€澶寸殑璇锋眰杩涜浠g悊锛岃浆鍙戝埌鍚庣鏈嶅姟鍣ㄦ垨鑰呭悗绔儴缃茬鍙c€?/p>

濡傛灉鎮ㄦ湁鏇村ソ鐨勬兂娉曪紝娆㈣繋璁ㄨ锛?/p>

鍓嶅悗绔垎绂婚」鐩紝濡備綍瑙e喅璺ㄥ煙闂锛?/strong>

1銆佷粈涔堟槸璺ㄥ煙锛?/p>

棣栧厛璋堜竴涓嬩负浠€涔堜細璺ㄥ煙锛屽墠绔负浜嗛槻姝㈢洍鐢ㄧ綉缁滆祫婧愶紝寮曞叆浜嗗悓婧愮殑姒傚康锛屾垜浠仛寮€鍙戠殑閮界煡閬擄紝鎴戜滑鍚姩涓€涓悗鍙扮殑绋嬪簭閮介渶瑕佷竴涓猧p鍜岀鍙e彿锛屼竴涓猧p鍜岀鍙e彿灏卞彲浠ユ彁渚涙湇鍔′簡銆?br class=”sysbr”>
鎵€浠ョ畝鍗曠殑鐞嗚В锛氬鏋渋p涓嶅悓锛岃偗瀹氬氨璺ㄥ煙浜嗭紝濡傛灉ip鐩稿悓锛岀鍙d笉鍚岋紝閭d篃鏄法鍩熺殑琛屼负銆?/p>

2銆佸浣曡В鍐筹紵

杩欓噷鎴戜滑涓嶇綏鍒楁墍鏈夋柟娉曪紝璇村父鐢ㄧ殑鍗冲彲锛岄潰璇曡鎺屾彙鎶€宸э紝闈㈣瘯涓嶆槸鑳屽崥瀹紝娣卞叆鐞嗚В锛屽皬浼欎即浠嚜宸辫繕寰楀幓璇曚竴璇?br class=”sysbr”>
1銆佷娇鐢╦sonp瑙e喅缃戠珯璺ㄥ煙 锛堜笉鐢ㄥ璇达紝js鏈韩鍙互璺ㄥ煙锛屽甫鍥炶姹傦級

2銆佷娇鐢ㄨ缃搷搴斿ご鍏佽璺ㄥ煙

public Map<String, Object> ajaxB(HttpServletResponse response) {
response.setHeader(“
Access-Control-Allow-Origin”, “*”);

Map<String, Object> result = new HashMap<String, Object>();
result.put(“errorCode”, “200”);
result.put(“errorMsg”, “鐧婚檰鎴愬姛”);
return result;
}

3銆佷娇鐢╪ginx鍋氬弽鍚戜唬鐞?杩欎釜鏄洰鍓嶄娇鐢ㄦ瘮杈冨鐨勬柟寮忥級

璇锋眰涓嶅悓鐨勯」鐩紝鍙互浠ヨ矾寰勭殑鏂瑰紡杩涜鍖哄垎锛岃姹傚埌nginx鍚庤繘琛屾嫤鎴紝杞彂鍒颁笉鍚岀殑ip鍜岀鍙g殑鏈嶅姟涓婂幓

server { listen 80; server_name www.***.com;###A椤圭洰 location /a { proxy_pass http://a.****.com:8080/; index index.html index.htm; }###B椤圭洰location /b { proxy_pass http://b.*****.com:8081/; index index.html index.htm; }}

杩欐槸涓€佺敓甯歌皥鐨勮瘽棰橈紝鎴戝垎鎯呭喌鎺ㄨ崘瑙e喅鏂规銆備笉璁插師鐞嗭紝鍙鏂规锛屽共璐э紒璇锋敹钘忋€?/p>

  • 濡傛灉鐙珛椤圭洰锛岄潪鍓嶅悗绔垎绂伙紝骞朵笖涓嶆秹鍙婅皟鐢ㄧ涓夋柟API锛屽垯涓嶅瓨鍦ㄦ闂锛岃鐩存帴鍒掕繃銆?/li>
  • 鍓嶅悗绔垎绂婚」鐩紝鑷繁娌℃湁鍚庣锛岀洿鎺ヨ皟鐢ㄧ涓夋柟鐨刟pi锛屾湁涓ょ閫斿緞瑙e喅锛?.鍜岀涓夋柟鏈嶅姟鍣ㄥ紑鍙戜汉鍛樻矡閫氾紝鏄惁鍙互寮€鍚法鍩熻祫婧愬叡浜紙CORS锛夛紝濡傛灉鍙互锛岄棶棰樺凡缁忚В鍐炽€?.绗笁鏂筧pi浠ュ畨鍏ㄧ瓑涓虹敱锛屼笉鍚屾剰寮€鍚疌ORS锛屾垨鏃犳硶鑱旂郴绗笁鏂广€傚垯鍓嶇鍙互閫氳繃iis,nginx锛屾垨鑰厀ebpack dev server锛坣ode.js鍚庣鑴氭湰锛夐厤缃弽鍚戜唬鐞嗭紝鍙樷€滆法鍩熶负鍚屽煙鈥溿€?/li>
  • 鍓嶅悗绔垎绂婚」鐩紝鍓嶇璋冪敤闄よ嚜宸卞悗绔互澶栫殑绗笁鏂筧pi鍑虹幇璺ㄥ煙闂銆傞€氳繃涓婅堪绗簩绉嶆柟妗堟棤娉曡В鍐崇殑锛屽彲浠ュ拰鑷繁椤圭洰鐨勫悗绔崗鍟嗭紝鏄惁鍙互璁╁悗鍙拌浆鍙戣姹傗€斺€斿嵆璁╁悗绔幓璇锋眰鍝嶅簲缁欏墠绔€傦紙璺ㄥ煙闂浠呭嚭鐜板湪娴忚鍣ㄨ剼鏈腑锛屽悗绔皟鐢ㄤ笉瀛樺湪姝ら棶棰橈級
  • 鍦ㄥ凡缁忓紑鍚簡cors鐨勬帴鍙h皟鐢ㄦ椂锛屾湁鏃朵粛鐒舵姤璺ㄥ煙閿欒锛屼笉涓€瀹氭槸璺ㄥ煙闂銆傝姹傚ご鎴栬€呰姹傚弬鏁颁笉姝g‘锛屽悗绔病鏈夋甯稿鐞嗭紝chrome涔熶細鎶ヨ法鍩熼敊璇€傛绫婚棶棰樺睘浜庡悗绔痓ug锛屽悗绔噸鐐规帓鏌ユ槸鍚︽纭搷搴斾簡OPTIONS璇锋眰銆?/li>
  • 鑷充簬jsonp杩欑鍙よ€佺殑瑙e喅鏂规锛屽湪鐜颁唬寮€鍙戞柟寮忎腑骞朵笉鎺ㄨ崘锛屽湪浠ヤ笂鎵€鏈夋柟娉曞潎鏃犳硶瑙e喅鐨勭殑鎯呭喌涓嬪幓鑰冭檻锛屼絾鎴戞湰浜轰粛鐒朵笉鎺ㄨ崘銆?/li>

鍓嶈█

浠庡垰鎺ヨЕ鍓嶇寮€鍙戣捣锛岃法鍩熻繖涓瘝灏变竴鐩翠互寰堥珮鐨勯鐜囧湪韬竟閲嶅鍑虹幇锛屼竴鐩村埌鐜板湪锛屽凡缁忚皟璇曡繃N涓法鍩熺浉鍏崇殑闂浜嗭紝16骞存椂涔熸暣鐞嗚繃涓€绡囩浉鍏虫枃绔狅紝浣嗘槸鎰熻杩樻槸宸簡鐐逛粈涔堬紝浜庢槸鐜板湪閲嶆柊姊崇悊浜嗕竴涓嬨€?/p>

涓汉瑙佽瘑鏈夐檺锛屽鏈夊樊閿欙紝璇峰澶氳璋咃紝娆㈣繋鎻愬嚭issue锛屽彟澶栫湅鍒拌繖涓爣棰橈紝璇峰嬁鍠穨

棰樼翰

鍏充簬璺ㄥ煙锛屾湁N绉嶇被鍨嬶紝鏈枃鍙笓娉ㄤ簬ajax璇锋眰璺ㄥ煙(,ajax璺ㄥ煙鍙槸灞炰簬娴忚鍣?鍚屾簮绛栫暐”涓殑涓€閮ㄥ垎,鍏跺畠鐨勮繕鏈塁ookie璺ㄥ煙iframe璺ㄥ煙,LocalStorage璺ㄥ煙绛夎繖閲屼笉鍋氫粙缁?锛屽唴瀹瑰ぇ姒傚涓?

  • 浠€涔堟槸ajax璺ㄥ煙鍘熺悊琛ㄧ幇(鏁寸悊浜嗕竴浜涢亣鍒扮殑闂浠ュ強瑙e喅鏂规)
  • 濡備綍瑙e喅ajax璺ㄥ煙JSONP鏂瑰紡CORS鏂瑰紡浠g悊璇锋眰鏂瑰紡
  • 濡備綍鍒嗘瀽ajax璺ㄥ煙http鎶撳寘鐨勫垎鏋愪竴浜涚ず渚?/li>

浠€涔堟槸ajax璺ㄥ煙

ajax璺ㄥ煙鐨勫師鐞?/p>

ajax鍑虹幇璇锋眰璺ㄥ煙閿欒闂,涓昏鍘熷洜灏辨槸鍥犱负娴忚鍣ㄧ殑鈥滃悓婧愮瓥鐣モ€?鍙互鍙傝€?/p>

娴忚鍣ㄥ悓婧愭斂绛栧強鍏惰閬挎柟娉?闃竴宄?

CORS璇锋眰鍘熺悊

CORS鏄竴涓猈3C鏍囧噯锛屽叏绉版槸”璺ㄥ煙璧勬簮鍏变韩”锛圕ross-origin resource sharing锛夈€傚畠鍏佽娴忚鍣ㄥ悜璺ㄦ簮鏈嶅姟鍣紝鍙戝嚭XMLHttpRequest璇锋眰锛屼粠鑰屽厠鏈嶄簡AJAX鍙兘鍚屾簮浣跨敤鐨勯檺鍒躲€?/p>

鍩烘湰涓婄洰鍓嶆墍鏈夌殑娴忚鍣ㄩ兘瀹炵幇浜咰ORS鏍囧噯,鍏跺疄鐩墠鍑犱箮鎵€鏈夌殑娴忚鍣╝jax璇锋眰閮芥槸鍩轰簬CORS鏈哄埗鐨?鍙笉杩囧彲鑳藉钩鏃跺墠绔紑鍙戜汉鍛樺苟涓嶅叧蹇冭€屽凡(鎵€浠ヨ鍏跺疄鐜板湪CORS瑙e喅鏂规涓昏鏄€冭檻鍚庡彴璇ュ浣曞疄鐜扮殑闂)銆?/p>

鍏充簬CORS锛屽己鐑堟帹鑽愰槄璇?
璺ㄥ煙璧勬簮鍏变韩 CORS 璇﹁В(闃竴宄?

鍙﹀锛岃繖閲屼篃鏁寸悊浜嗕竴涓疄鐜板師鐞嗗浘(绠€鍖栫増):

濡備綍鍒ゆ柇鏄惁鏄畝鍗曡姹?

娴忚鍣ㄥ皢CORS璇锋眰鍒嗘垚涓ょ被锛氱畝鍗曡姹傦紙simple request锛夊拰闈炵畝鍗曡姹傦紙not-so-simple request锛夈€傚彧瑕佸悓鏃舵弧瓒充互涓嬩袱澶ф潯浠讹紝灏卞睘浜庣畝鍗曡姹傘€?/p>

  • 璇锋眰鏂规硶鏄互涓嬩笁绉嶆柟娉曚箣涓€锛欻EAD,GET,POST
  • HTTP鐨勫ご淇℃伅涓嶈秴鍑轰互涓嬪嚑绉嶅瓧娈碉細AcceptAccept-LanguageContent-LanguageLast-Event-IDContent-Type(鍙檺浜庝笁涓€糰pplication/x-www-form-urlencoded銆?multipart/form-data銆乼ext/plain)

鍑℃槸涓嶅悓鏃舵弧瓒充笂闈袱涓潯浠讹紝灏卞睘浜庨潪绠€鍗曡姹傘€?/p>

ajax璺ㄥ煙鐨勮〃鐜?/p>

璇村疄璇濓紝褰撳垵鏁寸悊杩囦竴绡囨枃绔狅紝鐒跺悗浣滀负浜嗕竴涓В鍐虫柟妗堬紝浣嗘槸鍚庢潵鍙戠幇浠嶇劧鏈夊緢澶氫汉杩樻槸涓嶄細銆傛棤濂堝彧鑳借€楁椂鍙堣€楀姏鐨勮皟璇曘€傜劧鑰屽氨绠楁槸鎴戞潵鍒嗘瀽锛屼篃鍙細鏍规嵁瀵瑰簲鐨勮〃鐜版潵鍒ゆ柇鏄惁鏄法鍩燂紝鍥犳杩欎竴鐐规槸寰堥噸瑕佺殑銆?/p>

ajax璇锋眰鏃?濡傛灉瀛樺湪璺ㄥ煙鐜拌薄,骞朵笖娌℃湁杩涜瑙e喅,浼氭湁濡備笅琛ㄧ幇:(娉ㄦ剰锛屾槸ajax璇锋眰锛岃涓嶈璇翠负浠€涔坔ttp璇锋眰鍙互锛岃€宎jax涓嶈锛屽洜涓篴jax鏄即闅忕潃璺ㄥ煙鐨勶紝鎵€浠ヤ粎浠呮槸http璇锋眰ok鏄笉琛岀殑)

娉ㄦ剰:鍏蜂綋鐨勫悗绔法鍩熼厤缃鐪嬮绾蹭綅缃€?/p>

绗竴绉嶇幇璞?No ‘
Access-Control-Allow-Origin’ header is present on the requested resource,骞朵笖The response had HTTP status code 404

鍑虹幇杩欑鎯呭喌鐨勫師鍥犲涓嬶細

  • 鏈ajax璇锋眰鏄€滈潪绠€鍗曡姹傗€?鎵€浠ヨ姹傚墠浼氬彂閫佷竴娆¢妫€璇锋眰(OPTIONS)
  • 鏈嶅姟鍣ㄧ鍚庡彴鎺ュ彛娌℃湁鍏佽OPTIONS璇锋眰,瀵艰嚧鏃犳硶鎵惧埌瀵瑰簲鎺ュ彛鍦板潃

瑙e喅鏂规: 鍚庣鍏佽options璇锋眰

绗簩绉嶇幇璞?No ‘
Access-Control-Allow-Origin’ header is present on the requested resource,骞朵笖The response had HTTP status code 405

杩欑鐜拌薄鍜岀涓€绉嶆湁鍖哄埆,杩欑鎯呭喌涓嬶紝鍚庡彴鏂规硶鍏佽OPTIONS璇锋眰,浣嗘槸涓€浜涢厤缃枃浠朵腑(濡傚畨鍏ㄩ厤缃?,闃绘浜哋PTIONS璇锋眰,鎵嶄細瀵艰嚧杩欎釜鐜拌薄

瑙e喅鏂规: 鍚庣鍏抽棴瀵瑰簲鐨勫畨鍏ㄩ厤缃?/p>

绗笁绉嶇幇璞?No ‘
Access-Control-Allow-Origin’ header is present on the requested resource,骞朵笖status 200

杩欑鐜拌薄鍜岀涓€绉嶅拰绗簩绉嶆湁鍖哄埆,杩欑鎯呭喌涓嬶紝鏈嶅姟鍣ㄧ鍚庡彴鍏佽OPTIONS璇锋眰,骞朵笖鎺ュ彛涔熷厑璁窸PTIONS璇锋眰,浣嗘槸澶撮儴鍖归厤鏃跺嚭鐜颁笉鍖归厤鐜拌薄

姣斿origin澶撮儴妫€鏌ヤ笉鍖归厤,姣斿灏戜簡涓€浜涘ご閮ㄧ殑鏀寔(濡傚父瑙佺殑X-Requested-With澶撮儴),鐒跺悗鏈嶅姟绔氨浼氬皢response杩斿洖缁欏墠绔?鍓嶇妫€娴嬪埌杩欎釜鍚庡氨瑙﹀彂XHR.onerror,瀵艰嚧鍓嶇鎺у埗鍙版姤閿?/p>

瑙e喅鏂规: 鍚庣澧炲姞瀵瑰簲鐨勫ご閮ㄦ敮鎸?/p>

绗洓绉嶇幇璞?heade contains multiple values ‘*,*’

琛ㄧ幇鐜拌薄鏄紝鍚庡彴鍝嶅簲鐨刪ttp澶撮儴淇℃伅鏈変袱涓?br>Access-Control-Allow-Origin:*

璇村疄璇濓紝杩欑闂鍑虹幇鐨勪富瑕佸師鍥犲氨鏄繘琛岃法鍩熼厤缃殑浜轰笉浜嗚В鍘熺悊锛屽鑷翠簡閲嶅閰嶇疆锛屽:

  • 甯歌浜?net鍚庡彴(涓€鑸湪web.config涓厤缃簡涓€娆rigin,鐒跺悗浠g爜涓張鎵嬪姩娣诲姞浜嗕竴娆rigin(姣斿浠g爜鎵嬪姩璁剧疆浜嗚繑鍥?))
  • 甯歌浜?net鍚庡彴(鍦↖IS鍜岄」鐩殑webconfig涓悓鏃惰缃甇rigin:*)

瑙e喅鏂规(涓€涓€瀵瑰簲):

  • 寤鸿鍒犻櫎浠g爜涓墜鍔ㄦ坊鍔犵殑*锛屽彧鐢ㄩ」鐩厤缃腑鐨勫嵆鍙?/li>
  • 寤鸿鍒犻櫎IIS涓嬬殑閰嶇疆*锛屽彧鐢ㄩ」鐩厤缃腑鐨勫嵆鍙?/li>

濡備綍瑙e喅ajax璺ㄥ煙

涓€鑸琣jax璺ㄥ煙瑙e喅灏辨槸閫氳繃JSONP瑙e喅鎴栬€匔ORS瑙e喅,濡備互涓?(娉ㄦ剰锛岀幇鍦ㄥ凡缁忓嚑涔庝笉浼氬啀浣跨敤JSONP浜嗭紝鎵€浠SONP浜嗚В涓嬪嵆鍙?

JSONP鏂瑰紡瑙e喅璺ㄥ煙闂

jsonp瑙e喅璺ㄥ煙闂鏄竴涓瘮杈冨彜鑰佺殑鏂规(瀹為檯涓笉鎺ㄨ崘浣跨敤),杩欓噷鍋氱畝鍗曚粙缁?瀹為檯椤圭洰涓鏋滆浣跨敤JSONP,涓€鑸細浣跨敤JQ绛夊JSONP杩涜浜嗗皝瑁呯殑绫诲簱鏉ヨ繘琛宎jax璇锋眰)

瀹炵幇鍘熺悊

JSONP涔嬫墍浠ヨ兘澶熺敤鏉ヨВ鍐宠法鍩熸柟妗?涓昏鏄洜涓?<script> 鑴氭湰鎷ユ湁璺ㄥ煙鑳藉姏,鑰孞SONP姝f槸鍒╃敤杩欎竴鐐规潵瀹炵幇銆傚叿浣撳師鐞嗗鍥?/p>

瀹炵幇娴佺▼

JSONP鐨勫疄鐜版楠ゅぇ鑷村涓?鍙傝€冧簡鏉ユ簮涓殑鏂囩珷)

  • 瀹㈡埛绔綉椤电綉椤甸€氳繃娣诲姞涓€涓?lt;script>鍏冪礌锛屽悜鏈嶅姟鍣ㄨ姹侸SON鏁版嵁锛岃繖绉嶅仛娉曚笉鍙楀悓婧愭斂绛栭檺鍒秄unction addScriptTag(src) { var script = document.createElement(‘script’); script.setAttribute(“type”,”text/javascript”); script.src = src; document.body.appendChild(script); } window.onload = function () { addScriptTag(‘http://example.com/ip?callback=foo’); } function foo(data) { console.log(‘response data: ‘ + JSON.stringify(data)); }; 璇锋眰鏃?鎺ュ彛鍦板潃鏄綔涓烘瀯寤哄嚭鐨勮剼鏈爣绛剧殑src鐨?杩欐牱,褰撹剼鏈爣绛炬瀯寤哄嚭鏉ユ椂,鏈€缁堢殑src鏄帴鍙h繑鍥炵殑鍐呭
  • 鏈嶅姟绔搴旂殑鎺ュ彛鍦ㄨ繑鍥炲弬鏁板闈㈡坊鍔犲嚱鏁板寘瑁瑰眰

foo({ “test”: “testData” });

  • 鐢变簬<script>鍏冪礌璇锋眰鐨勮剼鏈紝鐩存帴浣滀负浠g爜杩愯銆傝繖鏃讹紝鍙娴忚鍣ㄥ畾涔変簡foo鍑芥暟锛岃鍑芥暟灏变細绔嬪嵆璋冪敤銆備綔涓哄弬鏁扮殑JSON鏁版嵁琚涓篔avaScript瀵硅薄锛岃€屼笉鏄瓧绗︿覆锛屽洜姝ら伩鍏嶄簡浣跨敤JSON.parse鐨勬楠ゃ€?/li>

娉ㄦ剰,涓€鑸殑JSONP鎺ュ彛鍜屾櫘閫氭帴鍙h繑鍥炴暟鎹槸鏈夊尯鍒殑,鎵€浠ユ帴鍙e鏋滆鍋欽SONO鍏煎,闇€瑕佽繘琛屽垽鏂槸鍚︽湁瀵瑰簲callback鍏抽敭瀛楀弬鏁?濡傛灉鏈夊垯鏄疛SONP璇锋眰,杩斿洖JSONP鏁版嵁,鍚﹀垯杩斿洖鏅€氭暟鎹?/p>

浣跨敤娉ㄦ剰

鍩轰簬JSONP鐨勫疄鐜板師鐞?鎵€浠SONP鍙兘鏄€淕ET鈥濊姹?涓嶈兘杩涜杈冧负澶嶆潅鐨凱OST鍜屽叾瀹冭姹?鎵€浠ラ亣鍒伴偅绉嶆儏鍐?灏卞緱鍙傝€冧笅闈㈢殑CORS瑙e喅璺ㄥ煙浜?鎵€浠ュ浠婂畠涔熷熀鏈娣樻卑浜?

CORS瑙e喅璺ㄥ煙闂

CORS鐨勫師鐞嗕笂鏂囦腑宸茬粡浠嬬粛浜嗭紝杩欓噷涓昏浠嬬粛鐨勬槸锛屽疄闄呴」鐩腑锛屽悗绔簲璇ュ浣曢厤缃互瑙e喅闂(鍥犱负澶ч噺椤圭洰瀹炶返閮芥槸鐢卞悗绔繘琛岃В鍐崇殑)锛岃繖閲屾暣鐞嗕簡涓€浜涘父瑙佺殑鍚庣瑙e喅鏂规:

PHP鍚庡彴閰嶇疆

PHP鍚庡彴寰楅厤缃嚑涔庢槸鎵€鏈夊悗鍙颁腑鏈€涓虹畝鍗曠殑,閬靛惊濡備笅姝ラ鍗冲彲:

  • 绗竴姝?閰嶇疆Php 鍚庡彴鍏佽璺ㄥ煙

<?php header(‘
Access-Control-Allow-Origin: *’); header(‘
Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept’); //涓昏涓鸿法鍩烠ORS閰嶇疆鐨勪袱澶у熀鏈俊鎭?Origin鍜宧eaders

  • 绗簩姝?閰嶇疆Apache web鏈嶅姟鍣ㄨ法鍩?httpd.conf涓?

鍘熷浠g爜

<Directory /> AllowOverride none Require all denied </Directory>

鏀逛负浠ヤ笅浠g爜

<Directory /> Options FollowSymLinks AllowOverride none Order deny,allow Allow from all </Directory>

Node.js鍚庡彴閰嶇疆(express妗嗘灦)

Node.js鐨勫悗鍙颁篃鐩稿鏉ヨ姣旇緝绠€鍗曞氨鍙互杩涜閰嶇疆銆傚彧闇€鐢╡xpress濡備笅閰嶇疆:

app.all(‘*’, function(req, res, next) { res.header(“
Access-Control-Allow-Origin”, “*”); res.header(“
Access-Control-Allow-Headers”, “X-Requested-With”); res.header(“
Access-Control-Allow-Methods”, “PUT,POST,GET,DELETE,OPTIONS”); res.header(“X-Powered-By”, ‘ 3.2.1’) //杩欐浠呬粎涓轰簡鏂逛究杩斿洖json鑰屽凡 res.header(“Content-Type”, “application/json;charset=utf-8”); if(req.method == ‘OPTIONS’) { //璁﹐ptions璇锋眰蹇€熻繑鍥?res.sendStatus(200); } else { next(); } });

JAVA鍚庡彴閰嶇疆

JAVA鍚庡彴閰嶇疆鍙渶瑕侀伒寰涓嬫楠ゅ嵆鍙?

  • 绗竴姝?鑾峰彇渚濊禆jar鍖呬笅杞?cors-filter-1.7.jar, java-property-utils-1.9.jar 杩欎袱涓簱鏂囦欢鏀惧埌lib鐩綍涓嬨€?鏀惧埌瀵瑰簲椤圭洰鐨剋ebcontent/WEB-INF/lib/涓?
  • 绗簩姝?濡傛灉椤圭洰鐢ㄤ簡Maven鏋勫缓鐨?璇锋坊鍔犲涓嬩緷璧栧埌pom.xml涓?(闈瀖aven璇峰拷瑙?

<dependency> <groupId>com.thetransactioncompany</groupId> <artifactId>cors-filter</artifactId> <version>[ version ]</version> </dependency>

鍏朵腑鐗堟湰搴旇鏄渶鏂扮殑绋冲畾鐗堟湰,CORS杩囨护鍣?/p>

  • 绗笁姝?娣诲姞CORS閰嶇疆鍒伴」鐩殑Web.xml涓? App/WEB-INF/web.xml)

<!– 璺ㄥ煙閰嶇疆–> <filter> <!– The CORS filter with parameters –> <filter-name>CORS</filter-name> <filter-class>
com.thetransactioncompany.cors.CORSFilter</filter-class> <!– Note: All parameters are options, if omitted the CORS Filter will fall back to the respective default values. –> <init-param> <param-name>
cors.allowGenericHttpRequests</param-name> <param-value>true</param-value> </init-param> <init-param> <param-name>cors.allowOrigin</param-name> <param-value>*</param-value> </init-param> <init-param> <param-name>cors.allowSubdomains</param-name> <param-value>false</param-value> </init-param> <init-param> <param-name>cors.supportedMethods</param-name> <param-value>GET, HEAD, POST, OPTIONS</param-value> </init-param> <init-param> <param-name>cors.supportedHeaders</param-name> <param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value> </init-param> <init-param> <param-name>cors.exposedHeaders</param-name> <!–杩欓噷鍙互娣诲姞涓€浜涜嚜宸辩殑鏆撮湶Headers –> <param-value>X-Test-1, X-Test-2</param-value> </init-param> <init-param> <param-name>cors.supportsCredentials</param-name> <param-value>true</param-value> </init-param> <init-param> <param-name>cors.maxAge</param-name> <param-value>3600</param-value> </init-param> </filter> <filter-mapping> <!– CORS Filter mapping –> <filter-name>CORS</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>

璇锋敞鎰?浠ヤ笂閰嶇疆鏂囦欢璇锋斁鍒皐eb.xml鐨勫墠闈?浣滀负绗竴涓猣ilter瀛樺湪(鍙互鏈夊涓猣ilter鐨?

  • 绗洓姝?鍙兘鐨勫畨鍏ㄦā鍧楅厤缃敊璇?娉ㄦ剰锛屾煇浜涙鏋朵腑-璀鍏徃绉佷汉妗嗘灦锛屾湁瀹夊叏妯″潡鐨勶紝鏈夋椂鍊欒繖浜涘畨鍏ㄦā鍧楅厤缃細褰卞搷璺ㄥ煙閰嶇疆锛岃繖鏃跺€欏彲浠ュ厛灏濊瘯鍏抽棴瀹冧滑)

JAVA Spring Boot閰嶇疆

20171230琛ュ厖

浠呭垪涓剧畝鍗曠殑鍏ㄥ眬閰嶇疆

@Configuration public class CorsConfig { private CorsConfiguration buildConfig() { CorsConfiguration corsConfiguration = new CorsConfiguration(); // 鍙互鑷绛涢€?
corsConfiguration.addAllowedOrigin(“*”);
corsConfiguration.addAllowedHeader(“*”);
corsConfiguration.addAllowedMethod(“*”); return corsConfiguration; } @Bean public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new
UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration(“/**”, buildConfig()); return new CorsFilter(source); } }

鏂板缓閰嶇疆锛岀劧鍚庢坊鍔燙onfiguration娉ㄨВ鍗冲彲閰嶇疆鎴愬姛

PS锛氳繖涓€閮ㄥ垎鏂规硶鏄敹褰曠殑锛屾病鏈変翰韬疄璺佃繃锛屼絾鏍规嵁鍙嶉锛岀悊璁轰笂鍙

NET鍚庡彴閰嶇疆

.NET鍚庡彴閰嶇疆鍙互鍙傝€冨涓嬫楠?

  • 绗竴姝?缃戠珯閰嶇疆

鎵撳紑鎺у埗闈㈡澘锛岄€夋嫨绠$悊宸ュ叿,閫夋嫨iis;鍙抽敭鍗曞嚮鑷繁鐨勭綉绔欙紝閫夋嫨娴忚;鎵撳紑缃戠珯鎵€鍦ㄧ洰褰?鐢ㄨ浜嬫湰鎵撳紑web.config鏂囦欢娣诲姞涓嬭堪閰嶇疆淇℃伅,閲嶅惎缃戠珯

璇锋敞鎰?浠ヤ笂鎴浘杈冭€?濡傛灉閰嶇疆浠嶇劧鍑洪棶棰?鍙互鑰冭檻澧炲姞鏇村鐨刪eaders鍏佽,姣斿:

“Access-Control-Allow-Headers”:”X-Requested-With,Content-Type,Accept,Origin”

  • 绗簩姝?鍏跺畠鏇村閰嶇疆,濡傛灉绗竴姝ヨ繘琛屼簡鍚?浠嶇劧鏈夎法鍩熼棶棰橈紝鍙兘鏄?鎺ュ彛涓湁闄愬埗姝讳竴浜涜姹傜被鍨?姣斿鍐欐浜哖OST绛?锛岃繖鏃跺€欒鍘婚櫎闄?鍒舵帴鍙d腑锛岄噸澶嶉厤缃簡Origin:*锛岃鍘婚櫎鍗冲彲IIS鏈嶅姟鍣ㄤ腑锛岄噸澶嶉厤缃簡Origin:*锛岃鍘婚櫎鍗冲彲

浠g悊璇锋眰鏂瑰紡瑙e喅鎺ュ彛璺ㄥ煙闂

娉ㄦ剰锛岀敱浜庢帴鍙d唬鐞嗘槸鏈変唬浠风殑锛屾墍浠ヨ繖涓粎鏄紑鍙戣繃绋嬩腑杩涜鐨勩€?/p>

涓庡墠闈㈢殑鏂规硶涓嶅悓锛屽墠闈ORS鏄悗绔В鍐筹紝鑰岃繖涓富瑕佹槸鍓嶇瀵规帴鍙h繘琛屼唬鐞嗭紝涔熷氨鏄?

  • 鍓嶇ajax璇锋眰鐨勬槸鏈湴鎺ュ彛
  • 鏈湴鎺ュ彛鎺ユ敹鍒拌姹傚悗鍚戝疄闄呯殑鎺ュ彛璇锋眰鏁版嵁锛岀劧鍚庡啀灏嗕俊鎭繑鍥炵粰鍓嶇
  • 涓€鑸敤node.js鍗冲彲浠g悊

鍏充簬濡備綍瀹炵幇浠g悊锛岃繖閲屽氨涓嶉噸鐐规弿杩颁簡锛屾柟娉曞拰澶氾紝涔熶笉闅撅紝鍩烘湰閮芥槸鍩轰簬node.js鐨勩€?/p>

鎼滅储鍏抽敭瀛梟ode.js,浠g悊璇锋眰鍗冲彲鎵惧埌涓€澶хエ鐨勬柟妗堛€?/p>

OPTIONS棰勬鐨勪紭鍖?/p>

Access-Control-Max-Age:

杩欎釜澶撮儴鍔犱笂鍚庯紝鍙互缂撳瓨姝ゆ璇锋眰鐨勭鏁般€?/p>

鍦ㄨ繖涓椂闂磋寖鍥村唴锛屾墍鏈夊悓绫诲瀷鐨勮姹傞兘灏嗕笉鍐嶅彂閫侀妫€璇锋眰鑰屾槸鐩存帴浣跨敤姝ゆ杩斿洖鐨勫ご浣滀负鍒ゆ柇渚濇嵁銆?/p>

闈炲父鏈夌敤锛屽彲浠ュぇ骞呬紭鍖栬姹傛鏁?/p>

濡備綍鍒嗘瀽ajax璺ㄥ煙

涓婅堪宸茬粡浠嬬粛浜嗚法鍩熺殑鍘熺悊浠ュ強濡備綍瑙e喅锛屼絾瀹為檯杩囩▼涓紝鍙戠幇浠嶇劧鏈夊緢澶氫汉瀵圭収鐫€绫讳技鐨勬枃妗f棤娉曡В鍐宠法鍩熼棶棰橈紝涓昏浣撶幇鍦紝鍓嶇浜哄憳涓嶇煡閬撲粈涔堟椂鍊欐槸璺ㄥ煙闂閫犳垚鐨勶紝浠€涔堟椂鍊欎笉鏄紝鍥犳杩欓噷绋嶅井浠嬬粛涓嬪浣曞垎鏋愪竴涓姹傛槸鍚﹁法鍩?

鎶撳寘璇锋眰鏁版嵁

绗竴姝ュ綋鐒舵槸寰楃煡閬撴垜浠殑ajax璇锋眰鍙戦€佷簡浠€涔堟暟鎹紝鎺ユ敹浜嗕粈涔堬紝鍋氬埌杩欎竴姝ュ苟涓嶉毦锛屼篃涓嶉渶瑕乫iddler绛夊伐鍏凤紝浠呭熀浜嶤hrome鍗冲彲

  • Chrome娴忚鍣ㄦ墦寮€瀵瑰簲鍙戠敓ajax鐨勯〉闈紝F12鎵撳紑Dev Tools
  • 鍙戦€乤jax璇锋眰
  • 鍙充晶闈㈡澘->NetWork->XHR锛岀劧鍚庢壘鍒板垰鎵嶇殑ajax璇锋眰锛岀偣杩涘幓

绀轰緥涓€(姝e父鐨刟jax璇锋眰)

涓婅堪璇锋眰鏄竴涓纭殑璇锋眰锛屼负浜嗘柟渚匡紝鎴戞妸姣忎竴涓ご鍩熺殑鎰忔€濋兘琛ㄦ槑浜嗭紝鎴戜滑鍙互娓呮櫚鐨勭湅鍒帮紝鎺ュ彛杩斿洖鐨勫搷搴斿ご鍩熶腑锛屽寘鎷簡

Access-Control-Allow-Headers: X-Requested-With,Content-Type,Accept Access-Control-Allow-Methods: Get,Post,Put,OPTIONS Access-Control-Allow-Origin: *

鎵€浠ユ祻瑙堝櫒鎺ユ敹鍒板搷搴旀椂锛屽垽鏂殑鏄纭殑璇锋眰锛岃嚜鐒朵笉浼氭姤閿欙紝鎴愬姛鐨勬嬁鍒颁簡鍝嶅簲鏁版嵁銆?/p>

绀轰緥浜?璺ㄥ煙閿欒鐨刟jax璇锋眰)

涓轰簡鏂逛究锛屾垜浠粛鐒舵嬁涓婇潰鐨勯敊璇〃鐜扮ず渚嬩妇渚嬨€?/p>

杩欎釜璇锋眰涓紝鎺ュ彛Allow閲岄潰娌℃湁鍖呮嫭OPTIONS锛屾墍浠ヨ姹傚嚭鐜颁簡璺ㄥ煙銆?/p>

杩欎釜璇锋眰涓紝
Access-Control-Allow-Origin: *鍑虹幇浜嗕袱娆★紝瀵艰嚧浜嗚法鍩熼厤缃病鏈夋纭厤缃紝鍑虹幇浜嗛敊璇€?/span>

鏇村璺ㄥ煙閿欒鍩烘湰閮芥槸绫讳技鐨勶紝灏辨槸浠ヤ笂涓夋牱娌℃湁婊¤冻(Headers,Allow,Origin)锛岃繖閲屼笉鍐嶄竴涓€璧樿堪銆?/p>

绀轰緥涓?涓庤法鍩熸棤鍏崇殑ajax璇锋眰)

褰撶劧锛屼篃骞朵笉鏄墍鏈夌殑ajax璇锋眰閿欒閮戒笌璺ㄥ煙鏈夊叧锛屾墍浠ヨ涓嶈娣锋穯锛屾瘮濡備互涓?

姣斿杩欎釜璇锋眰锛屽畠鐨勮法鍩熼厤缃病鏈変竴鐐归棶棰橈紝瀹冨嚭閿欎粎浠呮槸鍥犱负request鐨凙ccept鍜宺esponse鐨凜ontent-Type涓嶅尮閰嶈€屽凡銆?/p>

鏇村

鍩烘湰涓婇兘鏄繖鏍峰幓鍒嗘瀽涓€涓猘jax璇锋眰锛岄€氳繃Chrome灏卞彲浠ョ煡閬撲簡鍙戦€佷簡浠€涔堟暟鎹紝鏀跺埌浜嗕粈涔堟暟鎹紝鐒跺悗鍐嶄竴涓€姣斿灏辩煡閬撻棶棰樹綍鍦ㄤ簡銆?/p>

搞事情!那些不能说的秘密都在这里   关注公众号:求知百科  

         

本文来自网络,不代表求知百科立场,转载请注明出处:http://www.hfxhjqr.com/1273.html

作者: admin

发表评论

您的电子邮箱地址不会被公开。

联系我们

联系我们

0898-88881688

在线咨询: QQ交谈

邮箱: email@wangzhan.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们