什么是跨域

什么是跨域？

　　跨域意味着浏览器无法执行其他网站的脚本。它是由浏览器的同源策略引起的，是由浏览器强加的安全限制。

　　所谓同源，就是域名、协议、端口都一样。如果你不懂，那也没关系。举个栗子：

　　调用(非跨域)

　　呼叫(不同主域名：123/456，跨域)

　　已调用(不同的子域：abc/def，跨域)

　　呼叫(不同端口：8080/8081，跨域)

　　已调用(不同协议：http/https，跨域)

　　请注意：虽然localhost和127.0.0.1都指向这台机器，但它们也属于跨域。

　　当浏览器执行一个javascript脚本时，它会检查该脚本属于哪个页面。如果不是同源页面，就不执行。

　　解决方法：

　　1、JSONP:

　　关于如何使用我就不赘述了，但是注意JSONP只支持GET请求，不支持POST请求。

　　2.代理：

　　例如，如果您需要调用，您可以编写一个接口在后端调用并获取返回值，然后将其返回给index.html。这是一种代理模式。相当于绕过浏览器，自然没有跨域问题。

　　3.PHP端修改表头(XHR2模式)

　　在php界面脚本中添加以下两句话：

　　标题(‘访问控制-允许-原始： * ‘)；//允许从所有来源访问

　　标题(‘访问控制-允许-方法：发布，获取’)；//允许访问

　　由于浏览器同源策略的限制。同源策略是一种约定，是浏览器的核心和基本安全功能。如果没有相应的策略，浏览器的正常功能可能会受到影响。可以说Web是建立在同源策略的基础上的，浏览器只是同源策略的一种实现。同源策略防止一个域中的javascript脚本与另一个域中的内容进行交互。所谓同源性(即同域)是指两页有相同的协议、主机和端口号

　　当请求url的协议、域名和端口中的任何一个不同于当前页面url时，它就是跨域的

　　请求的页面url是否跨域(协议、域名、端口号相同)不同跨域协议(http/https)不同跨域主域名(test/百度)不同跨域子域(不同跨域端口号(8080/7001)

　　[1]无法读取非同源网页的Cookie、LocalStorage和IndexedDB

　　[2]无法联系非同源网页的DOM

　　[3] AJAX请求不能发送到不同的源地址

　　[1]设置document.domain，解决不能读取非同源网页的Cookie问题

　　因为浏览器通过document.domain属性检查两个页面是否同源，只要设置了同一个document.domain，两个页面就可以共享Cookie(此方案仅限于同一个主域不同子域的跨域应用场景。)

　　[2]跨文档通信API:window.postMessage()

　　调用postMessage方法，实现父窗口向子窗口发送消息(子窗口也可以通过这个方法向父窗口发送消息)

　　它可以用来解决以下问题：

　　页面和新窗口之间的数据传输它在上述三种情况下打开页面和嵌套iframe消息之间的跨域数据传输

　　呼叫消息事件，收听对方发送的消息

　　【3】JSONP

　　JSONP是一种常见的服务器和客户端之间的跨源通信方法。最大的特点是应用简单，兼容性好(兼容较低版本IE)。缺点是只支持get请求，不支持post请求。

　　核心思想：网页通过添加一个向服务器请求JSON数据。收到请求后，服务器将数据发送回具有指定名称的回调函数的参数位置。

　　(1)本地实现：

　　 jQuery ajax:

　　 Vue.js

　　【4】CORS

　　CORS是跨来源资源共享的缩写。它是W3C标准，属于跨来源AJAX请求的基本解决方案。

　　1.普通跨域请求：只有服务器端需要设置访问控制允许源

　　2.带cookie的跨域请求：需要设置前端和后端

　　【前端设置】根据xhr.withCredentials字段，判断是否有cookie。

　　原生ajax

　　 jQuery ajax

　　虚拟资源

　　 axios

　　[服务器设置]

　　对CORS的服务器端支持主要通过设置访问控制允许源来实现。如果浏览器检测到相应的设置，可以允许Ajax跨域访问。

　　 Java背景

　　 Nodejs后台

　　 PHP背景

　　 Apache需要使用mod_headers模块激活HTTP头的设置，默认激活。您只需将以下内容添加到Apache配置文件、或的配置中

　　文章每周持续更新。可以第一次在微信上看“前端集锦”，回复[视频][书籍]领取200G视频资料和30本PDF书籍