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

跨域解决方案🔨

一、前言👁

什么是跨域?

当一个请求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反向代理