什么是跨域、为什么要跨域、怎么解决跨域
1.什么是跨域?
要了解什么是跨域,我们先说一下同源的概念。同源,是指协议、域名、端口都相同。
例如:http://192.168.0.1:8080与https://192.168.3.1:8080不是同源,因为协议不同,第一个冒号前面的为协议,中间的为域名,第二个冒号后面的为端口,只要满足有一处不同,则就不是同源。
所谓跨域就是从 A
向 B
发请求,如若他们的地址协议、域名、端口都不相同,直接访问就会造成跨域问题,跨域是非常常见的现象!请求是跨域的但并不一定会报错,普通的图片请求。css文件请求是不会报错的。报错的条件是浏览器的同源策略,且发送Ajax请求,跨域是客户端问题
。
2.为什么要跨域?
为了安全起见,浏览器设置了同源策略,当页面执行脚本的时候,浏览器会检查访问的资源是否同源,如果不是,就会报错。
3.如何解决跨域?
(1)JSONP
利用的是 script 标签 src 属性请求 js 无跨域问题,但具有局限性,只能发送 get 请求
(2)CORS
当请求违反了同源策略,就在请求头添加 Access-Control-Allow-Origin 属性,浏览器会判断响应中 Access-Control-Allow-Origin 值是否和当前的地址相同,匹配成功后才会做响应处理,否则继续报错。缺点是会忽略cookie,而且对浏览器版本有一定的要求
(3)nginx反向代理接口跨域
可以将前端项目部署到和接口同源的当前本地的服务器上。在vue.config.js 中进行代理配置,假设当我访问 http://localhost:9528/api/login 时会转换为间接访问 http://localhost:3000/api/login
devServer: {
// 其他代码省略。。。。。
// 代理配置
proxy: {
// 代理服务器,当请求的网址是http://localhost:3000的时候,会转成http://192.168.80.115:3000
// /api 是 看接口文档所写的,每当访问本地的/api接口时,会转化为访问真实的服务器
'/api': {
target: 'http://localhost:3000' // 我们要代理的真实接口地址
}
}
(4)web sockets
它是一种浏览器的API,它的目标是在一个单独的持久连接上提供全双工、双向通信。(同源策略对web sockets不适用)web sockets原理:在JS创建了web socket之后,会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后,建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。 只有在支持web socket协议的服务器上才能正常工作。
相关文章
- 金融服务领域的大数据:即时分析
- 影响大数据、机器学习和人工智能未来发展的8个因素
- 从0开始构建一个属于你自己的PHP框架
- 如何将Hadoop集成到工作流程中?这6个优秀实践必看
- SEO公司使用大数据优化其模型的5种方法
- 关于Web Workers你需要了解的七件事
- 深入理解HTTPS原理、过程与实践
- 增强分析:数据和分析的未来
- PHP协程实现过程详解
- AI专家:大数据知识图谱——实战经验总结
- 关于PHP的错误机制总结
- 利用数据分析量化协同过滤算法的两大常见难题
- 怎么做大数据工作流调度系统?大厂架构师一语点破!
- 2019大数据处理必备的十大工具,从Linux到架构师必修
- OpenCV中的KMeans算法介绍与应用
- 教大家如果搭建一套phpstorm+wamp+xdebug调试PHP的环境
- CentOS下三种PHP拓展安装方法
- Go语言HTTP Server源码分析
- Go语言HTTP Server源码分析
- 2017年4月编程语言排行榜:Hack首次进入前五十