浏览器跨域及其解决方案
title: 浏览器跨域及其解决方案
author: May
date: 20220428</pre>
什么是跨域跨域的表现解决跨域问题- 浏览器设置(不推荐)- 前端的非正统解决方式- CORS(跨域资源共享)- 配置nginx反向代理
跨域 出于浏览器的同源策略限制， 同源 是指协议、域名、端口都一样， 同源策略（Sameoriginpolicy） 是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。
调用页面时接口数据不返回，控制台中会有红色的报错信息中有类似于 CORS policy 关键字。另外，在最新谷歌浏览器中，会有提出类似于loaded over HTTPS此种关键字，均可以考虑为跨域导致。
[图片上传失败...(image-26deed-1651135597111)]
tips: 有的时候后台小伙伴使用postman测试好的接口，前端不可以使用，原因就是postman不是浏览器，不会有同源限制，同理移动设备app开发和小程序开发也不会有这个问题。这个不是前端bug，同源限制也不是一个不好的规则。
虽然跨域不是一个不好的事情，但是对于前后端分离的web开发来说确实需要解决的，大致的解决方案可分为：
直接从根源解决问题，让浏览器安全策略不起作用。这个方法虽然可以解决问题但是不现实。
官方正统解决方案， CORS规范 允许服务器向浏览器返回一些HTTP Headers，浏览器可以基于这些HTTP Headers来决定是否突破SOP的限制。需要后端配合，浏览器需要什么，接口服务给什么。
nginx是一个高性能的HTTP和反向代理web服务器，nginx用来解决跨域问题的原理与 前端非正统解决方式 的 proxy 的思路是一致的。项目请求接口由nginx服务发出，获取到的数据再经由nginx传递给前端项目，这样前端的请求其实都是由nginx处理的，就没有跨域发生了。
绛旓細鏈嶅姟鍣ㄤ唬鐞嗘槸寮哄ぇ鐨勮法鍩熻В鍐虫柟妗锛屽畠鍏佽鏈嶅姟鍣ㄧ洿鎺ヨ姹傚拰杩斿洖璺ㄥ煙璧勬簮銆傝宒ocument.domain涓昏鐢ㄤ簬瑙ｅ喅涓诲煙鍚嶇浉鍚屼絾瀛愬煙鍚嶄笉鍚岀殑鎯呭喌锛岄氳繃璁剧疆document.domain锛屽彲浠ュ厑璁稿悓涓涓诲煙涓嬬殑瀛愰〉闈簰鐩搁氫俊锛屼絾璁剧疆鏈変竴瀹氱殑闄愬埗锛屽彧鑳借缃负涓诲煙鎴栨洿楂樼骇鐨勭埗鍩熴傞氳繃JavaScript鐨勫阀濡欒繍鐢紝鎴戜滑鍙互瀹炵幇鏇寸簿缁嗙殑璺ㄥ煙璁...
绛旓細1. JSONP鏂瑰紡 鍒╃敤script鏍囩鐨勬棤璺ㄥ煙闄愬埗锛岄氳繃鍔ㄦ佽幏鍙朖SON鏁版嵁锛屽阀濡欏湴缁曡繃SOP銆備絾闇娉ㄦ剰锛孞SONP浠呮敮鎸丟ET璇锋眰锛屽苟涓旈渶瑕佹湇鍔″櫒鏀寔銆2. CORS鎶鏈 Cross-Origin Resource Sharing (CORS)鏄幇浠ｆ祻瑙堝櫒鏀寔鐨勯珮绾цВ鍐虫柟妗堛傚墠绔祻瑙堝櫒鏀寔IE9鍙婁互涓婄増鏈紝鏈嶅姟鍣ㄩ渶鍦ㄥ搷搴斿ご涓坊鍔燗ccess-Control-Allow-Origin...
绛旓細1銆丣SONP鏂瑰紡瑙ｅ喅璺ㄥ煙 jsonp鐨勫師鐞嗗氨鏄埄鐢ㄤ簡script鏍囩涓嶅彈娴忚鍣ㄥ悓婧愮瓥鐣ョ殑闄愬埗锛岀劧鍚庡拰鍚庣涓璧烽厤鍚堟潵瑙ｅ喅璺ㄥ煙闂鐨勩2銆丆ORS鏂瑰紡瑙ｅ喅璺ㄥ煙 cors鏄法鍩熻祫婧愬叡浜紝鏄竴绉嶅熀浜嶩TTP澶寸殑鏈哄埗锛岃鏈哄埗閫氳繃鍏佽鏈嶅姟鍣ㄦ爣绀洪櫎浜嗗畠鑷繁浠ュ鐨勫叾浠杘rigin锛堝煙锛屽崗璁拰绔彛锛夛紝浣垮緱娴忚鍣ㄥ厑璁歌繖浜沷rigin璁块棶鍔犺浇鑷繁鐨...
绛旓細瑙ｅ喅鍓嶇椤圭洰璺ㄥ煙闂锛鍙互閫氳繃proxy.conf.json鏂囦欢閰嶇疆銆傝缃畉arget鎸囧悜鍚庣鏈嶅姟锛宑hangeOrigin璁句负true锛屽厑璁歌法鍩熻姹傦紝浣唖ecure璁句负false锛屼互骞宠 瀹夊叏涓庝究鎹枫傜綉缁滃畨鍏ㄦ槸涓涓寔缁涔犵殑杩囩▼锛岃棰戞暀绋嬫槸鎻愬崌鐞嗚В鐨勬嵎寰勩傚湪B绔欐垨YouTube涓婏紝鏈夋捣閲忕殑282G璧勬簮鍖呬緵浣犲厤璐硅幏鍙栵紝甯姪浣犱笉鏂垚闀裤傚湪杩欎釜淇℃伅鐖嗙偢鐨...
绛旓細Chrome鎻掍欢浠ｇ悊鍜屾湇鍔＄浠ｇ悊鏄父瑙佺殑瑙ｅ喅绛栫暐銆傛彃浠朵唬鐞嗗埄鐢–hrome娴忚鍣ㄧ殑鐗规畩鏉冮檺锛屽厑璁歌儗鏅剼鏈彂閫佽法鍩熻姹傘侫REX閫夋嫨浜咰hrome鎻掍欢浠ｇ悊锛屽叾鏍稿績鏈哄埗鏄氳繃椤甸潰鑴氭湰涓庢彃浠剁殑background閮ㄥ垎杩涜閫氫俊锛屽熷姪content-script浣滀负鏁版嵁浼犻掓ˉ姊併備互涓嬫槸鍏蜂綋鎿嶄綔姝ラ锛1. 鍦ㄩ〉闈㈣剼鏈腑锛岀敓鎴愪竴涓殢鏈哄瓧绗︿覆锛坱id锛夛紝骞剁敤...
绛旓細鐗堟湰鍙49涔嬪墠鐨璺ㄥ煙璁剧疆 鍏堜粙缁嶄竴涓嬭佹柟娉曪紝鍙傝冧簡涓浜涚綉涓婄殑鏁欑▼锛屽叾瀹炵洿鎺ュ湪鎵撳紑鍛戒护涓婂姞--disable-web-security灏卞彲浠ヤ簡銆傚叿浣撳仛娉曚负锛1.涓嬭浇骞跺畨瑁呭ソchorme娴忚鍣鍚庡湪妗岄潰鎵惧埌娴忚鍣ㄥ揩鎹峰浘鏍囧苟鐐瑰嚮榧犳爣鍙抽敭鐨勫睘鎬т竴鏍忋2.鍦ㄥ睘鎬ч〉闈腑鐨勭洰鏍囪緭鍏ユ閲屽姞涓 --disable-web-security 濡備笅鍥炬墍绀猴細3.鐐瑰嚮...
绛旓細妗嗘灦瑙ｅ喅娴忚鍣ㄨ法鍩闂鐨勬柟娉曟湁寰堝锛屽叾涓竴绉嶆柟娉曟槸鍦 Controller 灞傚搴旂殑鏂规硶涓婃坊鍔 @CrossOrigin 娉ㄨВ銆傚彟涓绉嶆柟娉曟槸娣诲姞 CORS 杩囨护鍣紝鏂板缓閰嶇疆绫 CorsConfig锛屽垱寤 CorsFilter 杩囨护鍣紝鍏佽璺ㄥ煙銆傝繕鏈変竴绉嶆柟娉曟槸浣跨敤 Nginx 鍙嶅悜浠ｇ悊锛岃缃弽鍚戜唬鐞嗗湴鍧鍜岀鍙ｏ紝灏嗚姹傝浆鍙戝埌 Spring Boot 搴旂敤鏈嶅姟鍣ㄤ笂...
绛旓細濡備綍瑙ｅ喅璺ㄥ煙鐨勯棶棰樼殑鍛紝 鏈変互涓嬩笁绉鏂规 1锛屼唬鐞嗙殑鏂规锛屽皢璇锋眰璧勬簮鐨勬搷浣滈氳繃涓灞備唬鐞嗭紝鐒跺悗鍙栧洖鏁版嵁锛屽啀浠庝唬鐞嗗眰鎶婃暟鎹繑缁娴忚鍣锛岀敱浜庝唬鐞嗗眰鍜屾祻瑙堝櫒鏄悓婧愮殑锛岃繖鏍峰氨瑙ｅ喅浜嗚法鍩熺殑闂锛堥氬父璇曠敤浜巒ode灞傦級2锛屾斁寮鏈嶅姟绔法鍩熼檺鍒讹紝閫氳繃娣诲姞response鐨刪eader鐨勬柟娉曪紙鍙傝僪eader('Access-Control-Allow-...
绛旓細1. 淇敼chrome瀹夊叏绛栫暐锛屽甫鍙傚惎鍔 2. 浣跨敤xSwitch 娴忚鍣鎻掍欢绡℃敼閮ㄥ垎璇锋眰 3. 浣跨敤鏈湴浠ｇ悊杞彂 webpack dev server鎴栬卬gnix 4. 涓绾у煙鍚嶇浉鍚屽彲浠ヨ缃甦ocument.domain涓轰竴绾у煙鍚 5. 鎺ュ彛鍏佽璺ㄥ煙璋冪敤 123閫傜敤浜庡紑鍙戣皟璇 45涓鑸敤浜庣敓浜
绛旓細铏界劧璺ㄥ煙涓嶆槸涓涓笉濂界殑浜嬫儏锛屼絾鏄浜庡墠鍚庣鍒嗙鐨剋eb寮鍙戞潵璇寸‘瀹為渶瑕佽В鍐崇殑锛屽ぇ鑷寸殑瑙ｅ喅鏂规鍙垎涓猴細鐩存帴浠庢牴婧愯В鍐抽棶棰橈紝璁娴忚鍣瀹夊叏绛栫暐涓嶈捣浣滅敤銆傝繖涓柟娉曡櫧鐒跺彲浠ヨВ鍐抽棶棰樹絾鏄笉鐜板疄銆傚畼鏂规缁熻В鍐虫柟妗堬紝 CORS瑙勮寖 鍏佽鏈嶅姟鍣ㄥ悜娴忚鍣ㄨ繑鍥炰竴浜汬TTP Headers锛屾祻瑙堝櫒鍙互鍩轰簬杩欎簺HTTP Headers鏉ュ喅瀹氭槸鍚...
