跨域解决方案[前端+后端]

跨域解决方案🔨

一、前言👁

什么是跨域?

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域 就是【不同源】导致【无法发送ajax异步请求】获取数据的表现，术语叫跨域

思考:如何解决跨域报错Access-Control-Allow-Origin,拿不到数据问题?

在这里插入图片描述

二、解决方法💡

前端👩‍🎓

1.前端代理 Http-proxy-middleware(最常用) 2.谷歌插件(开发过程用) 3.谷歌命令(最简单,直接把同源策略关闭)

如何配谷歌命令?

window环境下 1 找到谷歌浏览器安装目录或者直接用桌面的也行 发送桌面快捷方式 2 单击图标 鼠标右击 点击属性 3 在目标后面输入 下述代码 –disable-web-security --user-data-dir=C:\chromedata “C:\Program Files\Google\Chrome\Application\chrome.exe” --disable-web-security --user-data-dir=C:\chromedata 没有引号无所谓，有引号在外面 切记加个空格 再去创建下磁盘目录C:\chromedata 4 点击确定 双击打开你配置的快捷方式 随意访问

mac环境下 sudo open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/用户名/自己随便搞一个目录/ sudo open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/wof/ab/ sudo open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/wof/MyChromeDevUserData/

4.前端jsonp（需要前后端配合 不推荐) 5.用websocket技术 6.用H5里的window.postMessage在两个网页间传递数据 (iframe嵌套网页)

后端&运维👨‍🎓

后端：cors方法 也就是后端声明header头允许跨域

运维：nginx反向代理