1.什么是跨域?
同源策略:同一协议,同一域名,同一端口号。
只要不满足三者其中一种都是属于跨域问题。
2.跨域问题的解决方法(暂时了解到的几种)
1)Jsonp(只能接受get请求)
首先要知道,我们通过href src所请求下来的, js脚本, css文件, 或者image图片文件, 视频文件, 都不存在跨域问题。而ajax请求就会存在跨域问题.
Jsonp是一个非正式传输协议,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。
通常为了减轻web服务器的负载,我们把js、css,img等静态资源分离到另一台独立域名的服务器上,在html页面中再通过相应的标签从不同域名下加载静态资源,而被浏览器允许,基于此原理,我们可以通过动态创建script,再请求一个带参网址实现跨域通信。(具体实现看参考网址)
2)Nginx代理
跨域原理: 同源策略是浏览器的安全策略,不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议,不会执行JS脚本,不需要同源策略,也就不存在跨越问题。
实现思路:通过nginx配置一个代理服务器(域名与demo1相同,端口不同)做跳板机,反向代理访问demo2接口,并且可以顺便修改cookie中demo信息,方便当前域cookie写入,实现跨域登录。
反向代理的原理就是将前端的地址和后端的地址用nginx转发到同一个地址下,如5500端口和3000端口都转到3003端口下, 也可以解决跨域问题.
3)CROS(跨域资源共享 Cross-Origin Resourse Sharing)
cros是一个系统,它由一系列传输的HTTP头组成,这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应。
同源安全策略默认阻止“跨域”获取资源。但是 CORS 给了web服务器这样的权限,即服务器可以选择,允许跨域请求访问到它们的资源。
普通跨域请求:只服务端设置Access-Control-Allow-Origin即可,前端无须设置
若要带cookie请求:前后端都需要设置。
具体实现方法参考:https://www.ruanyifeng.com/blog/2016/04/cors.html
参考原文链接:https://zhuanlan.zhihu.com/p/436908586
https://blog.csdn.net/m0_57188429/article/details/117059922