同源策略
是浏览器的一个安全功能,不同源的网页脚本在没有明确授权的情况下,
不能读写对方资源。所谓同源是指"协议+域名+端口"三者都相同。
如下同源:
http://www.baidu.com/index.html
http://www.baidu.com/index.css
跨域
使用AJAX技术(XMLHttpRequest 对象),从一个网页去请求另一个网页资源时,违反浏览器同源策略限制,引起的安全问题,称为跨域。
注:localhost和127.0.0.1虽然都指向本机,但也属于跨域
- 跨域错误:–端口不同
跨域解决思路
- 不使用 AJAX技术(XMLHttpRequest)请求—用jsonp技术
- 授权跨域资源共享CORS
- 使用代理服务器
JSONP技术
不管是我们的script标签的src还是img标签的src,或者说link标签的href他们没有被同源策略所限制,
比如我们有可能使用一个网络上的图片,就可以请求得到,<img src="https://ss3.baidu.com/aa.jpg/>
jsonp就是使用同源策略这一“漏洞”,实现的跨域请求。
其基本原理:
是利用HTML的
1、jsonp技术实现
- jsonp技术利用script标签天生可以跨域特点解决跨域问题
代码动态创建script标签,将请求url地址作为script标签src属性值 - jsonp需要服务端支持
把真正的数据封装到一个函数中一起返回
{code:1,info:‘helloworld’}
callback({code:1,info:‘helloworld’})
后端:
前端:
<script>
<!-- <script src="http://10.7.162.67:3000/"></script> -->
sendProductList('http://10.7.162.67:3000')
function sendProductList(url){
let scriptEle = document.createElement('script') // <script>
scriptEle.setAttribute('src',url)
document.body.appendChild(scriptEle)
}
function callback(res){
let resObj = JSON.parse(res)
console.log(res)
console.log(resObj)
}
</script>
jsonp弊端
JSONP仅仅用于get请求
2、跨域资源共享CORS
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource )。
它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用sharing的限制。
3、代理服务器技术
proxy server—代理服务器
服务器与服务器之间就没有跨域问题
实现
vue3为例配置 vue.config.js
注:客户端接口url地址严格按照devServer配置,api接口url地址:http://192.168.0.100:8080