一、前端跨域产生的原因？
导致跨域的根本原因是请求浏览器的同源策略导致的
浏览器有同源策略限制，协议、域名、端口号三者一样就是同源，三者只要有一个不同就是跨域。
二、什么是同源策略？
同源策略（same origin policy）是netScape（网景）提出的一个安全策略，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。具体表现为浏览器在执行脚本前，会判断脚本是否与打开的网页是同源的，判断协议、域名、端口是否都相同，相同则表示同源。其中一项不相同就表示跨域访问。会在控制台报一个CORS异常，目的是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。
浏览器采用同源策略，在没有明确授权的情况下，禁止页面加载或执行与自身不同源的任何脚本。
三、跨域常见的几种方式有哪些？
目录
1、JSONP （不常用）
2、CORS 跨域资源共享 （前端不需要做任何改变）
3、proxy反向代理 （常用）
4、Nginx 代理(前端配置好，产品化去处理)
5、postMessage跨域消息传递
6、WebSocket协议跨域
7、document.domain + iframe
8、location.hash + iframe
9 、window.name + iframe
四、具体解决跨域的实现实例？
1、JSONP （不常用）
原理：是利用<script>标签不存在跨域请求的限制
缺点：1、只能处理get请求 2、通过URl携带参数容易被劫持，不安全
举例：也可以动态的去创建<script>标签，原理在这随意发挥，只要是<script>标签即可
文件1：index.html
文件2：index.jsonp.js
2、CORS 跨域资源共享 （前端不需要做任何改变）
原理：后端设置可访问的请求源
缺点：1、设置具体地址，有局限性 2、设置多源（*）就不能允许携带cookie了
举例：
前端发送请求（axios是基于promise封装）
后端设置相关请求： *号为多源，也可以替换为具体地址
3、proxy反向代理 （常用）
非脚手架搭建，则修改webpack.config.js项目。若是直接用脚手架搭建，则修改vue.config.js
4、Nginx 代理(前端配置好，产品化去处理)
通过请求到Nginx，让Nginx将这个请求发送到真正的服务器
推荐：
5、postMessage跨域消息传递
postMessage(data,origin)方法接受两个参数：
data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。
origin： 协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。
6、WebSocket协议跨域
定义：WebSocket Protocol 是HTML5一种新的协议。不同于Http协议，它实现了浏览器与服务器全双工通信，同时允许跨域通讯，能够支持服务器和客户端双方都主动推送消息给对方。
原生WebSocket API使用起来不太方便，我们使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容
前端代码
后端代码
7、document.domain + iframe
定义：该方案适用于：主域相同，子域名不同的情况。对于一些有产品体系的大公司而言，不同的页面可能在不同的服务器上，这些服务器的域名不同，但拥有同样的上级域名。如www..com, im..com, user..com，这些服务器上的页面就可以用domain来实现跨域数据访问
使用方式
通过js将两个页面都强制设定同一个基础主域，来实现同域的效果
8、location.hash + iframe
定义：实现原理： a欲与b跨域相互通信，通过中间页c来实现。 三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。
具体实现：A域：a.html -> B域：b.html -> A域：c.html，a与b不同域只能通过hash值单向通信，b与c也不同域也只能单向通信，但c与a同域，所以c可通过parent.parent访问a页面所有对象。
9 、window.name + iframe
定义：window.name可以在不同的页面(甚至不同的域名)加载后依然存在，并且可以支持非常长的name值(2MB)
到此这篇前端跨域方式（前端跨域原理）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdkf/31316.html