一、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
*/

说明:

优点:可以配置多个代理,且可以灵活的控制请求是否走代理。

缺点:配置略微繁琐,请求资源时必须加前缀。