一、AJAX:
客户端可以'悄悄向服务器端发请求,在页面没有刷新的情况下,实现页面的局部更新。 XMLHttpRequest、$、fetch、axios 跨域:如果多次请求协议、域名、端口号有不同的地方,称之为跨域 JSONP、CROS、代理。
二、同源策略
同源策略是两个URL的协议、域名、端口号一致,反之则是跨域。出现跨域的根本原因:浏览器的同源策略不允许非同源的URL之间进行资源的交互。
三、三种解决方法:
①JSONP方法:
(前后端一起配合使用):JSONP只支持GET数据请求,不支持POST请求。JSONP的实现原理:由于浏览器收同源策略的限制,网页无法通过Ajax请求非同源的接口数据,但是script标签不受浏览器同源策略的影响,可以通过src属性请求非同源js脚本。简而言之,JSONP的实现原理就是通过<script>标签的src属性,请求跨域的数据接口,并通过函数调用的形式,接收跨域接口响应回来的数据。
<body>
<script>
function success(data) {
console.log('JSONP响应回来的数据');
console.log(data); }
</script>
//这里返回的是一个函数调用
<scriptsrc="" target="_blank">http://www.liulongbin.top:3006/api/jsonp?callback=success&name=sy&age=18">
</script>
</body>
②CROS方法:
cors其实就是写服务器的人,在服务器返回响应的时候,加上特殊的响应头。之前我们说过,跨域是响应被浏览器拦截了。那浏览器看见这些特殊的响应头,就会放行。但是需要后端人员来进行配置。
③代理服务器
代理服务器(用的多):假设前端项目的端口是8080,服务器的端口号是5000。这时候受到同源策略的影响就会产生跨域。那这时候,启用一个代理服务器。这个代理服务器的端口和前端项目的端口保持一致,都是8080。这时候,前端发起请求,直接访问这个代理服务器。然后通过这个代理服务器去访问那个5000端口的服务器。代理服务器的端口虽然是8080,但是服务器之间没有同源策略,所以不会跨域。这就是代理服务器解决跨域的方法。
方法一:
创建一个vue.config.js,输入以下配置代码:
module.exports= {devServer:{proxy:"http://localhost:5000"}}
说明:
优点:配置简单,请求资源时直接发给前端(8080)即可。
缺点:不能配置多个代理,不能灵活的控制请求是否走代理。
工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器(优先匹配前端资源)
方法二:
module.exports = {
devServer:{
proxy: {
'/api1': {// 匹配所有以 '/api1'开头的请求路径
target:'http://localhost:5000',// 代理目标的基础路径
changeOrigin: true,
pathRewrite: {'^/api1': ''},
//ws: true,//用于配置websocket
changeOrigin: true
},
'/api2': {// 匹配所有以 '/api2'开头的请求路径
target: 'http://localhost:5001',// 代理目标的基础路径
changeOrigin: true,
pathRewrite: {'^/api2': ''}
}
}
}
}
/*
pathRewrite如果不配置,去服务器拿数据的时候,5000端口服务器因为加上了前缀,会返回404.所以需要配置,当访问5000端口服务器时,会把前缀去掉。
changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000
changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080
changeOrigin默认值为true
*/
说明:
优点:可以配置多个代理,且可以灵活的控制请求是否走代理。
缺点:配置略微繁琐,请求资源时必须加前缀。