跨域及解决方案:
同源策略
什么是跨域
跨域解决方案
同源策略:
同源策略是浏览器的一个安全功能,不同源的网页脚本在没有明确授权的情况下,不能读写对方资源。所谓同源是指"协议+域名+端口"者相同。
什么是跨域:
使用AJAX技术(XMLHttpRequest对象),从一个网贝去请水另一个网页资源时,违反浏览器同源策略限制,引起的安全问题,称为跨域。
跨域错误:
前后端分离项目
跨域解决思路:
1.不使用AJAX技术(XMLHttpRequest)请求
2.授权跨域资源共享
3.使用代理服务器
JSONP技术:
首先,不知道大家有没有注意,不管是我们的script标签的src还是img标签的src,或者说link标签的hef他们没有被同源策略所限制,
比如我们有可能使用一个网络上的图片,就可以请求得到,<img src="https://ss3.baidu.com/aa.jpg/>jsonp就是使用同源策略这一“漏洞”,实现的跨域请求
其基本原理是利用HTML的<script>标签天生可以跨域这一特点,用其加载另一个域的JsON数据,
加载完成后会自动运行一个回调函数通知调用者。此过程需要另一个域的服务端支持,所以这种方式实现的跨域并不是任意的。
该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。
jsonp弊端:JSONP仅仅用于get请求
跨域资源共享CORS:
代理服务器技术:
调用方解决方法:
调用方设置代理
vue3为例配置vue.config.js