前端跨域问题究竟是怎么解决的

62 阅读1分钟

浏览器厂商为了防止不同源的网站互相访问导致用户信息泄漏而制定了同源策略。

首先浏览器是不会限制请求发送的,如果前端页面发送了一个不同源的请求,那么浏览器会正常向目标服务器发起请求,如果服务器允许所有源访问的话,则不会进行拦截,可以正常获取到数据。

所以一种解决方案是后端服务更改返回头header里的字段"Access-Control-Allow-Origin", "*",允许所有域名访问。

还有一种解决方案是绕过浏览器,服务器之间是没有同源策略限制的,所以我们可以用一个服务器来发送接收请求,像vue cli引用的插件就是用这个方法解决跨域问题的。

具体实现流程:前端本地开发时使用node建立一个项目同源的代理服务器来做中转站,比如我们的前端项目地址是qianduan.com,那么这个代理服务器的地址为qianduan.com/api, 代理服务器拦截需要转发的请求,并向目标服务器发送请求并接收,再返回给浏览器,这时qianduan.com访问qianduan.com就不会受限制了。在浏览器的视角来看就是qianduan.com向自己发送了请求,并接收自己返回的数据,满足浏览器的同源要求。