咱们做前端的，平时跟后端对接接口那是必须的事情，但是可能很多同学忽略了一个对接过程中可能会发生的问题——跨域，那跨域到底是啥呢？为什么会跨域呢？又怎么才能解决呢？
为什么会出现跨域问题呢？那就不得不讲浏览器的同源策略了，它规定了协议号-域名-端口号这三者必须都相同才符合同源策略
如有有一个不相同，就会出现跨域问题，不符合同源策略导致的后果有
- 1、LocalStorge、SessionStorge、Cookie等浏览器内存无法跨域访问
- 2、DOM节点无法跨域操作
- 3、Ajax请求无法跨域请求
注意点：一个IP是可以注册多个不同域名的，也就是多个域名可能指向同一个IP，即使是这样，他们也不符合同源策略
跨域发生在什么时候呢？我考过很多位同学，得到了两种答案
- 1、请求一发出就被浏览器的跨域报错拦下来了(大多数人回答)
- 2、请求发出去到后端，后端返回数据，在浏览器接收后端数据时被浏览器的跨域报错拦下来
那到底是哪种呢？我们可以验证下，咱们先npm i nodemon -g，然后创建一个index.js，然后nodemon index起一个node服务
再创建一个index.html，用来写前端的请求代码，咱们就写一个简单的AJAX请求吧
最终，前端确实是跨域报错了。但这不是结果，我们要想知道是哪一个答案，关键在于看后端的node服务那里有没有输出，就一目了然了。所以，答案2才是对的。
前面提到了同源策略，满足协议号-域名-端口号这三者都相同就是同域，反之就是跨域，会导致跨域报错，下面通过几个例子让大家巩固一下对同域和跨域的认识把！
跨域其实是一个很久的问题了，对应的解决方案也有很多，一起接着往下读吧！！！
前面咱们说了，因为浏览器同源策略的存在，导致存在跨域问题，那有没有不受跨域问题所束缚的东西呢？其实是有的，以下这三个标签加载资源路径是不受束缚的
1、script标签：<script src=https://www.jb51.net/article/"加载资源路径"></script>
2、link标签：<link herf="加载资源路径"></link>
3、img标签：<img src=https://www.jb51.net/article/"加载资源路径"></img>
而JSONP就是利用了script的src加载不受束缚，从而可以拥有从不同的域拿到数据的能力。但是JSONP需要前端后端配合，才能实现最终的跨域获取数据。
JSONP通俗点说就是：利用script的src去发送请求，将一个方法名callback传给后端，后端拿到这个方法名，将所需数据，通过字符串拼接成新的字符串callback(所需数据)，并发送到前端，前端接收到这个字符串之后，就会自动执行方法callback(所需数据)。
后端代码
前端代码
JSONP的缺点就是，需要前后端配合，并且只支持get请求方法
我理解的WebSocket是一种协议(跟http同级，都是协议)，并且他可以进行跨域通信。
后端代码
先安装npm i ws
前端代码
Cors，全称是Cross-Origin Resource Sharing，意思是跨域资源共享，Cors一般是由后端来开启的，一旦开启，前端就可以跨域访问后端。
为什么后端开启Cors，前端就能跨域请求后端呢？我的理解是：前端跨域访问到后端，后端开启Cors，发送Access-Control-Allow-Origin: 域名 字段到前端（其实不止一个），前端浏览器判断Access-Control-Allow-Origin的域名如果跟前端域名一样，浏览器就不会实行跨域拦截，从而解决跨域问题。
后端代码
前端代码
还是回到同源策略，同源策略它只是浏览器的一个策略而已，它是限制不到后端的，也就是前端-后端会被同源策略限制，但是后端-后端则不会被限制，所以可以通过Node接口代理，先访问已设置Cors的后端1，再让后端1去访问后端2获取数据到后端1，后端1再把数据传到前端
后端2代码
创建一个index2.js，并nodmeon index2.js
后端1代码
前端代码
其实Nginx跟Node接口代理是一个道理，只不过Nginx就不需要我们自己去搭建一个中间服务
先下载nginx，然后将nginx目录下的nginx.conf修改如下:
最后通过命令行nginx -s reload启动nginx
后端代码
前端代码
场景：http://127.0.0.1:5500/index.html页面中使用了iframe标签内嵌了一个http://127.0.0.1:5555/index.html的页面
虽然这两个页面存在于一个页面中，但是需要iframe标签来嵌套才行，这两个页面之间是无法进行通信的，因为他们端口号不同，根据同源策略，他们之间存在跨域问题
那应该怎么办呢？使用postMessage可以使这两个页面进行通信
场景：a.sanxin.com/index.html 与 b.sanxin.com/index.html之间的通信
其实上面这两个正常情况下是无法通信的，因为他们的域名不相同，属于跨域通信
那怎么办呢？其实他们有一个共同点，那就是他们的二级域名都是sanxin.com，这使得他们可以通过document.domain && iframe的方式来通信
以上就是前端跨域问题解决及七大跨域原理详解的详细内容，更多关于前端跨域问题及跨域原理的资料请关注脚本之家其它相关文章！
到此这篇跨域解决方案的原理（跨域解决方案的原理包括）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/bcyy/12944.html