前后端分离项目跨域问题是不可避免的。通常情况下前端由React、Vue等框架编写,通过ajax请求服务端API,传输数据用json格式。
那么为什么有跨域的问题呢?解决跨域问题有哪些方式?搞清楚这两个问题我们需要了解一下什么是同源策略。
浏览器的同源策略
同源策略(Same origin policy)是一种安全约定,是所有主流浏览器最核心也是最基本的安全功能之一。同源策略规定:不同域的客户端脚本在没有明确授权的情况下,不能请求对方的资源。同源指的是:域名、协议、端口均相同。
比如我们访问一个网站,那么这个页面请求如下地址得情况是这样的:
另外,同源策略又分如下两种情况:
- DOM同源策略:禁止对不同源的页面DOM进行操作,主要防止iframe的情况。比如iframe标签里放一个支付宝付款的页面,如果没有同源策略,那么钓鱼网站除了域名不同,其他的则可以和支付宝的网站一模一样。
- XMLHttpRequest同源策略:禁止使用XHR对象向不同源的服务器发起http请求。比如网站记录了银行的cookie,这个时候你访问了恶意网站,黑客拿到你的cookie,再通过ajax请求之前的银行网站&#