#每天一个知识点# day19
什么是跨域及解决方法
跨域：
拿当前HTML页面的地址和在页面中AJAX请求的API地址做比较：
如果两个地址的协议域名端口号都相同，相当于HTML页面从同一个源下根据某个地址获取数据，属于“同源策略请求”，基于AJAX是可以直接请求到数据的！
如果三者（协议域名端口号）只要有一个不一样，那么就是“非同源策略请求（跨域请求）”，使用AJAX不能直接获取数据了！
方案：
方案一：JSONP
在客户端AJAX不允许直接的跨域请求，但是很多东西都可以直接的跨域，例如：script、link、img、iframe等（这些标签的SRC或者HREF设置任何一个资源请求地址，哪怕是其它源下的，也都没有跨域的限制，直接可以把内容获取到 [除非服务器做特殊处理了] =>针对这个特点，真实项目中某些JS文件加载的都是CDN地址）
方案二：CORS 跨域资源共享
主要是服务器设置：配置允许跨域的相关头部信息
客户端：
axios.defaults.withCredentials = true;
//=>xhr.withCredentials=true
axios在某些特定场景下，在发送真实请求之前都会发送一个预请求（OPTIONS）格式的，来验证是否允许跨域
弊端：只能指定一个允许源（不能用通配符和指定多个源），所以目前真实项目中基于CORS实现跨域资源共享是主流方案
方案三：WEBPACK代理（webpack proxy）
1. 安装webpack-dev-server
2. 配置代理：
在CREATE-REACT-APP脚手架中，我们只需要在package.json中设置porxy代理属性，属性值是目标服务器的地址；在客户端发送请求的时候，请求的接口先保证是同源，如果当前源下没有这个接口，没关系，基于dev-server使用webscoket已经把目标代理服务器上的对应接口数据获取到了，所以直接请求同源下没有的接口，也可以获取数据!
方案四：ngnix反向代理
方案五：node作为中间件代理
展开
前端开发圈
评论
相关推荐