跨域的知识和解决方法

喜欢ヅ旅行 2023-10-09 11:59 24阅读 0赞

1.[https://segmentfault.com/a/1190000000709909][https_segmentfault.com_a_1190000000709909]

2.[https://blog.csdn.net/qq\_38128179/article/details/84956552][https_blog.csdn.net_qq_38128179_article_details_84956552]

![Image 1][]

原创

# 什么是跨域？跨域解决方法 #

2018年12月14日 19:22:02 [@Demi][Demi] 阅读数 22788

分类专栏： [ JavaScript ][JavaScript] [ 浏览器 ][Link 1]

本文链接： [https://blog.csdn.net/qq\_38128179/article/details/84956552][https_blog.csdn.net_qq_38128179_article_details_84956552]

### 一、为什么会出现跨域问题 ###

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

### 二、什么是跨域 ###

当一个请求url的**协议、域名、端口**三者之间任意一个与当前页面url不同即为跨域

<table> 
 <tbody> 
  <tr> 
   <td><strong>当前页面url</strong></td> 
   <td><strong>被请求页面url</strong></td> 
   <td><strong>是否跨域</strong></td> 
   <td><strong>原因</strong></td> 
  </tr> 
  <tr> 
   <td>http://www.test.com/</td> 
   <td>http://www.test.com/index.html</td> 
   <td>否</td> 
   <td>同源（协议、域名、端口号相同）</td> 
  </tr> 
  <tr> 
   <td>http://www.test.com/</td> 
   <td>https://www.test.com/index.html</td> 
   <td>跨域</td> 
   <td>协议不同（http/https）</td> 
  </tr> 
  <tr> 
   <td>http://www.test.com/</td> 
   <td>http://www.baidu.com/</td> 
   <td>跨域</td> 
   <td>主域名不同（test/baidu）</td> 
  </tr> 
  <tr> 
   <td>http://www.test.com/</td> 
   <td>http://blog.test.com/</td> 
   <td>跨域</td> 
   <td>子域名不同（www/blog）</td> 
  </tr> 
  <tr> 
   <td>http://www.test.com:8080/</td> 
   <td>http://www.test.com:7001/</td> 
   <td>跨域</td> 
   <td>端口号不同（8080/7001）</td> 
  </tr> 
 </tbody> 
</table>

### 三、非同源限制 ###

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

【2】无法接触非同源网页的 DOM

【3】无法向非同源地址发送 AJAX 请求

### 四、跨域解决方法 ###

【1】**设置document.domain解决无法读取非同源网页的 Cookie问题**

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

// 两个页面都设置
    document.domain = 'test.com';

【2】**跨文档通信 API：window.postMessage()**

调用postMessage方法实现父窗口http://test1.com向子窗口http://test2.com发消息（子窗口同样可以通过该方法发送消息给父窗口）

它可用于解决以下方面的问题：

*  页面和其打开的新窗口的数据传递
 *  多窗口之间消息传递
 *  页面与嵌套的iframe消息传递
 *  上面三个场景的跨域数据传递

// 父窗口打开一个子窗口
    var openWindow = window.open('http://test2.com', 'title');

// 父窗口向子窗口发消息(第一个参数代表发送的内容，第二个参数代表接收消息窗口的url)  
openWindow.postMessage(‘Nice to meet you!’, ‘http://test2.com’);

调用message事件，监听对方发送的消息

// 监听 message 消息
    window.addEventListener('message', function (e) {
      console.log(e.source); // e.source 发送消息的窗口
      console.log(e.origin); // e.origin 消息发向的网址
      console.log(e.data);   // e.data   发送的消息
    },false);

【3】**JSONP**

JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好（兼容低版本IE），缺点是只支持get请求，不支持post请求。

核心思想：网页通过添加一个`<script>元素`，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。

①原生实现：

② jQuery ajax：

$.ajax({
        url: 'http://www.test.com:8080/login',
        type: 'get',
        dataType: 'jsonp',  // 请求方式为jsonp
        jsonpCallback: "handleCallback",    // 自定义回调函数名
        data: {}
    });

③ Vue.js

this.$http.jsonp('http://www.domain2.com:8080/login', {
        params: {},
        jsonp: 'handleCallback'
    }).then((res) => {
        console.log(res); 
    })

【4】**CORS**

CORS 是跨域资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法。

**1、普通跨域请求：只需服务器端设置Access-Control-Allow-Origin**

**2、带cookie跨域请求：前后端都需要进行设置**

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

①原生ajax

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容
    
    // 前端设置是否带cookie
    xhr.withCredentials = true;
    
    xhr.open('post', 'http://www.domain2.com:8080/login', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send('user=admin');
    
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            alert(xhr.responseText);
        }
    };

② jQuery ajax

$.ajax({
       url: 'http://www.test.com:8080/login',
       type: 'get',
       data: {},
       xhrFields: {
           withCredentials: true    // 前端设置是否带cookie
       },
       crossDomain: true,   // 会让请求头中包含跨域的额外信息，但不会含cookie
    });

③vue-resource

Vue.http.options.credentials = true

④ axios

axios.defaults.withCredentials = true

**【服务端设置】**

服务器端对于CORS的支持，主要是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。

① Java后台

/*
     * 导入包：import javax.servlet.http.HttpServletResponse;
     * 接口参数中定义：HttpServletResponse response
     */
    
    // 允许跨域访问的域名：若有端口需写全（协议+域名+端口），若没有端口末尾不用加'/'
    response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); 
    
    // 允许前端带认证cookie：启用此项后，上面的域名不能为'*'，必须指定具体的域名，否则浏览器会提示
    response.setHeader("Access-Control-Allow-Credentials", "true"); 
    
    // 提示OPTIONS预检时，后端需要设置的两个常用自定义头
    response.setHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With");

② Nodejs后台

③ PHP后台

<?php
     header("Access-Control-Allow-Origin:*");

④ Apache需要使用mod\_headers模块来激活HTTP头的设置，它默认是激活的。你只需要在Apache配置文件的<Directory>, <Location>, <Files>或<VirtualHost>的配置里加入以下内容即可

Header set Access-Control-Allow-Origin *

<div class="hide-article-box hide-article-pos text-center">
            <a class="btn-readmore" data-report-view='{"mod":"popu_376","dest":"https://blog.csdn.net/qq_38128179/article/details/84956552","strategy":"readmore"}' data-report-click='{"mod":"popu_376","dest":"https://blog.csdn.net/qq_38128179/article/details/84956552","strategy":"readmore"}'>
                展开阅读全文
                <svg class="icon chevrondown" aria-hidden="true">
                    <use xlink:href="#csdnc-chevrondown"></use>
                </svg>
            </a>
        </div>
            <div class="recommend-box"><div class="recommend-item-box type_blog clearfix" data-report-view='{"mod":"popu_614","dest":"https://blog.csdn.net/tjcjava/article/details/76468225","strategy":"BlogCommendFromMachineLearnPai2","index":"0"}' data-report-click='{"mod":"popu_614","dest":"https://blog.csdn.net/tjcjava/article/details/76468225","strategy":"BlogCommendFromMachineLearnPai2","index":"0"}'>
    <div class="content">
    	<a href="https://blog.csdn.net/tjcjava/article/details/76468225" target="_blank"  rel="noopener" title="什么是跨域？如何解决跨域问题？">
    	<h4 class="text-truncate oneline">
    			什么是<em>跨</em><em>域</em>？如何<em>解决</em><em>跨</em><em>域</em>问题？		</h4>
    	<div class="info-box d-flex align-content-center">
    		<p class="date-and-readNum oneline">
    			<span class="date hover-show">07-31</span>
    			<span class="read-num hover-hide">
    				阅读数 
    				4万+</span>
    			</p>
    		</div>
    	</a>
    	<p class="content">
    		<a href="https://blog.csdn.net/tjcjava/article/details/76468225" target="_blank" rel="noopener" title="什么是跨域？如何解决跨域问题？">
    			<span class="desc oneline">什么是跨域？浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域域名：主域名不同http://www.baidu.com/index.html–&amp;amp;gt;h...</span>
    		</a>
    		<span class="blog_title_box oneline ">
    								<span class="type-show type-show-blog type-show-after">博文</span>
    										<a target="_blank" rel="noopener" href="https://blog.csdn.net/tjcjava">来自：	<span class="blog_title"> 飞扬_柳絮的专栏</span></a>
    											</span>
    	</p>
    </div>
    </div>

<div class="comment-edit-box d-flex">
    	<a id="commentsedit"></a>
    	<div class="user-img">
    		<a href="//me.csdn.net/weixin_42847626" target="_blank" rel="noopener">
    			<img class="" src="https://avatar.csdn.net/D/F/5/3_weixin_42847626.jpg">
    		</a>
    	</div>
    	<form id="commentform">
    		<input type="hidden" id="comment_replyId">
    		<textarea class="comment-content" name="comment_content" id="comment_content" placeholder="想对作者说点什么"></textarea>
    		<div class="opt-box"> 
    			<div id="ubbtools" class="add_code">
    				<a href="#insertcode" code="code" target="_self"><i class="icon iconfont icon-daima"></i></a>
    			</div>
    			<input type="hidden" id="comment_replyId" name="comment_replyId">
    			<input type="hidden" id="article_id" name="article_id" value="84956552">
    			<input type="hidden" id="comment_userId" name="comment_userId" value="">
    			<input type="hidden" id="commentId" name="commentId" value="">
    			<div style="display: none;" class="csdn-tracking-statistics tracking-click" data-report-click='{"mod":"popu_384","dest":""}'><a href="#" target="_blank" class="comment_area_btn" rel="noopener">发表评论</a></div>
    			<div class="dropdown" id="myDrap">
    				<a class="dropdown-face d-flex align-items-center" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    				<div class="txt-selected text-truncate">添加代码片</div>
    				<svg class="icon d-block" aria-hidden="true">
    					<use xlink:href="#csdnc-triangledown"></use>
    				</svg>
    				</a>
    				<ul class="dropdown-menu" id="commentCode" aria-labelledby="drop4">
    					<li><a data-code="html">HTML/XML</a></li>
    					<li><a data-code="objc">objective-c</a></li>
    					<li><a data-code="ruby">Ruby</a></li>
    					<li><a data-code="php">PHP</a></li>
    					<li><a data-code="csharp">C</a></li>
    					<li><a data-code="cpp">C++</a></li>
    					<li><a data-code="javascript">JavaScript</a></li>
    					<li><a data-code="python">Python</a></li>
    					<li><a data-code="java">Java</a></li>
    					<li><a data-code="css">CSS</a></li>
    					<li><a data-code="sql">SQL</a></li>
    					<li><a data-code="plain">其它</a></li>
    				</ul>
    			</div>  
    			<div class="right-box">
    				<span id="tip_comment" class="tip">还能输入<em>1000</em>个字符</span>
    				<input type="button" class="btn btn-sm btn-cancel d-none" value="取消回复">
    				<input type="submit" class="btn btn-sm btn-red btn-comment" value="发表评论">
    			</div>
    		</div>
    	</form>
    </div>
    
    	<div class="comment-list-container">
    	<a id="comments"></a>
    	<div class="comment-list-box">
    	</div>
    	<div id="commentPage" class="pagination-box d-none"></div>
    	<div class="opt-box text-center">
    		<div class="btn btn-sm btn-link-blue" id="btnMoreComment"></div>
    	</div>
    </div>

[ ][Link 3]

#### 什么是*跨**域*？怎么*解决**跨**域*问题？ ####

06-15  阅读数 19万+

[ 什么是跨域？跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。所谓同源是指，域名，协议，端口均相同，不明白没关系，举个栗子：http... ][Link 3] 博文 [来自：  L瑜][L]

[ ][Link 4]

#### *跨**域*的几种常见的*解决*方式 ####

04-22  阅读数 2万+

[ 今天给大家分享一下，修真院官网JSS-5任务中可能会使用到的知识点：1.背景介绍1.1什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。广义的跨域：1.)资源跳转：... ][Link 4] 博文 [来自：  weixin\_42039396的博客][weixin_42039396]

[ ][Link 5]

#### 什么是*跨**域*？*解决**跨**域*的五种*方法*。 ####

07-11  阅读数 32

[ 解决办法：1、JSONP：使用方式就不赘述了，但是要注意JSONP只支持GET请求，不支持POST请求。2、代理：例如www.123.com/index.html需要调用www.456.com/ser... ][Link 5] 博文 [来自：  weixin\_33747129的博客][weixin_33747129]

<div class="recommend-item-box recommend-recommend-box"><div id="kp_box_59" data-pid="59"><script type="text/javascript">
    (function() {
        var s = "_" + Math.random().toString(36).slice(2);
        document.write('<div style="" id="' + s + '"></div>');
        (window.slotbydup = window.slotbydup || []).push({
            id: "u3491668",
            container:  s
        });
    })();

![Image 1][]

[ ][Link 6]

#### 如何*解决**跨**域*问题？ ####

08-27  阅读数 1273

[ &\#13; 　　如何解决跨域问题？首先我们需要知道什么是跨域，跨域指的是浏览器不能执行其它网站的脚本，它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。&... ][Link 6] 博文 [来自：  YSOcean的博客][YSOcean]

[ ][Link 7]

#### *解决**跨**域*的两种方案 ####

11-07  阅读数 3612

[ 一、跨域与同源策略跨域，通俗地讲，是指一个服务A的客户端请求另一个服务B的数据。下面给出了跨域的图示。在上面这个图中，描述了客户端与服务A关系，也就是说，客户端不允许对服务A以外的服务进行访问。这就是... ][Link 7] 博文 [来自：  流年梦里风起舞][Link 8]

[ ][Link 9]

#### 什么是*跨**域* ####

08-22  阅读数 36

[ 一、什么是跨域当一个请求url的协议、域名（主域名、子域名）、端口三个之中任一个与页面的url不同，即可认为是跨域。页面的url 请求的url 是否跨域 原因 http://www.bo... ][Link 9] 博文 [来自：  hammring的博客][hammring]

[ ][Link 10]

#### 什么是*跨**域*、怎么*解决**跨**域*以及如何实现*跨**域*下的登录 ####

09-13  阅读数 40

[ 前言：在以往开发中，不会涉及到跨域的问题，因为往往都是在同一个项目中开发代码或者单纯写小demo；However，在实际项目中，前后端分成两个不同的项目，各自部署在不同的域名下，这也就会遇到跨域问题了... ][Link 10] 博文 [来自：  Msgyvcici][Msgyvcici]

[ ][Link 11]

#### 什么是*跨**域*以及几种简单*解决*方案 ####

03-19  阅读数 432

[ 什么是跨域？要明白什么是跨域之前，首先要明白什么是同源策略？同源策略就是用来限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。那怎样判断是否是同源呢？如果协议，端口（如果指定了）和主机对于两个... ][Link 11] 博文 [来自：  大灰狼的小绵羊哥哥的博客][Link 12]

![Image 1][]

[ ][Link 13]

#### 常见的*跨**域**解决*方案以及原理 ####

10-13  阅读数 899

[ 一、JSONP(适用于单项跨域请求)原理：因为浏览器对script不存在同源策略，所以script可以跨域请求外部资源，返回的数据是json格式。缺点：1、只能发送get请求，无法发送post请求 2... ][Link 13] 博文 [来自：  lirunhui6的博客][lirunhui6]

[ ][Link 14]

#### Http--*跨**域*请求 ####

06-07  阅读数 676

[ 在浏览器中，与当前页面不同域名的url是不允许访问的，这是浏览器端的限制，后端设置Access-Control-Allow-Origin为发起发的URL即可，相当于开放给这个URL请求（注意，必须要和... ][Link 14] 博文 [来自：  BtWangZhi的博客][BtWangZhi]

[ ][Link 15]

#### 前后端分离与*跨**域*的*解决*方案（CORS的原理） ####

08-23  阅读数 1万+

[ 前后端分离 前后端分离的好处最大的好处就是前端JS可以做很大部分的数据处理工作，对服务器的压力减小到最小。 后台错误不会直接反映到前台，错误接秒较为友好。 由于后台是很难去探知前台页面的分布情况，而... ][Link 15] 博文 [来自：  来自一个小码农的记录][Link 16]

[ ][Link 17]

#### 彻底*解决**跨**域*问题(五种*解决**跨**域*的方式) ####

08-22  阅读数 8228

[ 跨域问题解决方案最近自己写了一个js组件，该js组件是提供给第三方使用的，而js组件中涉及了ajax请求，于是乎就出现了跨域请求问题。下面记录一下自己的解决路程。什么是跨域参考：跨域请求详解个人理解：... ][Link 17] 博文 [来自：  小雪的博客][Link 18]

[ ][Link 19]

#### JS中的*跨**域*问题及*解决*办法汇总 ####

11-16  阅读数 5360

[ 一、什么是跨域？在了解跨域之前，首先要知道什么是同源策略（same-originpolicy）。简单来讲同源策略就是浏览器为了保证用户信息的安全，防止恶意的网站窃取数据，禁止不同域之间的JS进行交互。... ][Link 19] 博文 [来自：  lareinalove的博客][lareinalove]

[ ][Link 20]

#### jsonp*跨**域*原理解析 ####

09-01  阅读数 7621

[ 背景：由于浏览器同源策略的限制，非同源下的请求，都会产生跨域问题，jsonp即是为了解决这个问题出现的一种简便解决方案。同源策略即：同一协议，同一域名，同一端口号。当其中一个不满足时，我们的请求即会发... ][Link 20] 博文 [来自：  badmoonc的博客][badmoonc]

[ ][Link 21]

#### 什么是*跨**域*以及产生原因 ####

07-29  阅读数 1204

[ 目录1.背景介绍2.知识剖析3.常见问题4.解决方案5.编码实战6.扩展思考7.参考文献8.更多讨论...... ][Link 21] 博文 [来自：  weixin\_40690385的博客][weixin_40690385]

[ ][Link 22]

#### 前端JS*跨**域**解决*方案 ####

11-07  阅读数 2107

[ JS跨域请求这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一... ][Link 22] 博文 [来自：  我在阴山下][Link 23]

[ ][Link 24]

#### 什么是*跨**域*问题？*解决*思路 ####

03-23  阅读数 277

[ 博客1:https://www.cnblogs.com/itmacy/p/6958181.html博客2:什么是跨域？跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施... ][Link 24] 博文 [来自：  LZJWXJ树袋熊][LZJWXJ]

[ ][Link 25]

#### 简析全双工与半双工的区别 ####

06-12  阅读数 8295

[ 全双工传输英文写法是:Full－DuplexTransmissions是指交换机在发送数据的同时也能够接收数据，两者同步进行，这好像我们平时打电话一样，说话的同时也能够听到对方的声音。目前的交换机都支... ][Link 25] 博文 [来自：  Charles' home][Charles_ home]

<div class="recommend-item-box recommend-recommend-box"><div id="kp_box_62" data-pid="62"><script type="text/javascript">
    (function() {
        var s = "_" + Math.random().toString(36).slice(2);
        document.write('<div style="" id="' + s + '"></div>');
        (window.slotbydup = window.slotbydup || []).push({
            id: "u3600849",
            container:  s
        });
    })();

![Image 1][]

[ ][Link 26]

#### 前端，什么是*跨**域*，及*跨**域*常见的*解决*方案（简讲） ####

06-06  阅读数 3168

[ 认识跨域解决跨域 ][Link 26] 博文 [来自：  eeeecw的博客][eeeecw]

[ ][Link 27]

#### 什么是*跨**域*？常见的*跨**域*的方式都有哪几种 ####

12-08  阅读数 1406

[ 跨域指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。同源就是指，域名，协议，端口均相同。http://www.123.com:8080/... ][Link 27] 博文 [来自：  William.Yao的博客][William.Yao]

[ ][Link 28]

#### *跨**域*问题的出现与*解决* ####

10-25  阅读数 688

[  jeecg跨域问题的出现与解决跨域问题是如何看出来的对于前后端相互分离的代码来说利用AJAX进行交互，在谷歌控制台上会出现请求头相关的信息，这就说明跨域了。具体错误信... ][Link 28] 博文 [来自：  qq\_41858479的博客][qq_41858479]

[ ][Link 29]

#### 屏蔽百家号 -(baijiahao) ####

01-27  阅读数 1万+

[ 快过年了，回家了，发个非技术博客吧。最近被百家号恶心到不行，搜了下屏蔽方法，在家懒得翻墙用谷歌，又懒得装插件设置屏蔽，找到了一个简单有效的方法，直接在搜索内容后边加-(baijiahao)，效果还不错... ][Link 29] 博文 [来自：  慢慢积累][Link 30]

[ ][Link 31]

#### 什么是*跨**域*?怎么*解决*? ####

05-06  阅读数 22

[ 什么是跨域跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。例如：a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不... ][Link 31] 博文 [来自：  无知无畏的博客][Link 32]

<div class="recommend-item-box recommend-recommend-box"><div id="kp_box_63" data-pid="63"><script
    async="async"
    charset="utf-8"
    src="https://shared.ydstatic.com/js/yatdk/3.0.1/stream.js"
    data-id="8935aa488dd58452b9e5ee3b44f1212f"
    data-udid="24C56021-A1CB-4A07-993A-2D2A7F00FDCD"
    data-div-Style="width:900px;height:76px;"
    data-img-Style="float:left;margin-right:15px;width:90px;height:60px;"
    data-tit-Style="font-size:16px;color:#f13d3d;"

data-des-Style=“font-size:12px;color:\#333;”

![Image 1][]

[ ][Link 33]

#### *跨**域*的几种方式 ####

03-03  阅读数 267

[ 什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。广义的跨域：1.)资源跳转：A链接、重定向、表单提交2.)资源嵌入：\&lt;link\&gt;、&a... ][Link 33] 博文 [来自：  柏灿的博客][Link 34]

[ ][Link 35]

#### 前端常见*跨**域**解决*方案（全） ####

09-13  阅读数 104

[ 什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。广义的跨域：1.)资源跳转：A链接、重定向、表单提交2.)资源嵌入：<link>、<script... ][Link 35] 博文 [来自：  weixin\_34281537的博客][weixin_34281537]

[ ][Link 36]

#### *跨**域*问题（前端面试最常问） ####

08-11  阅读数 4812

[ https://blog.csdn.net/as645788/article/details/51285688为什么要跨域？跨域问题是浏览器同源策略限制，当前域名的js只能读取同域下的窗口属性。 一个... ][Link 36] 博文 [来自：  山鬼谣弋痕夕的博客][Link 37]

[ ][Link 38]

#### 目前9种*跨**域*请求*解决*方案及详解 ####

08-12  阅读数 2547

[ 1，CORS（跨域资源共享）优点CORS通信与同源的AJAX通信没有差别，代码完全一样，容易维护。 支持所有类型的HTTP请求。缺点存在兼容性问题，特别是IE10以下的浏览器。 第一次发送非简单请求时... ][Link 38] 博文 [来自：  分享，让视野更宽阔][Link 39]

[ ][Link 40]

#### 什么是*跨**域*及怎么*解决**跨**域*问题？ ####

12-07  阅读数 3488

[ 什么是跨域？这篇博文解释的挺清楚，我直接引用https://blog.csdn.net/lambert310/article/details/51683775跨域，指的是浏览器不能执行其他网站的脚本。... ][Link 40] 博文 [来自：  lianzhang861的博客][lianzhang861]

<div class="recommend-item-box recommend-recommend-box"><div id="kp_box_64" data-pid="64"><script type="text/javascript">
    (function() {
        var s = "_" + Math.random().toString(36).slice(2);
        document.write('<div style="" id="' + s + '"></div>');
        (window.slotbydup = window.slotbydup || []).push({
            id: "u3600856",
            container:  s
        });
    })();

![Image 1][]

[ ][Link 41]

#### 什么是*跨**域*？怎样*解决**跨**域*问题 ####

12-04  阅读数 785

[ 1、什么是跨域跨域是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。所谓的同源是指：域名、协议、端口均相同。例如：http://www.12... ][Link 41] 博文 [来自：  bobozai86的博客][bobozai86]

[ ][Link 42]

#### 如何实现*跨**域*？ ####

07-02  阅读数 4960

[ 如何实现跨域？跨域：当浏览器执行脚本时会检查是否同源，只有同源的脚本才会执行，如果不同源即为跨域。这里的同源指访问的协议、域名、端口都相同。 同源策略是由Netscape提出的著名安全策略，是浏览器最... ][Link 42] 博文 [来自：  ConstXiong][ConstXiong]

[ ][Link 43]

#### 关于*跨**域*,以及*跨**域*的几种方式 ####

09-07  阅读数 218

[ 首先我们来想一想 为什么会有跨域这个名词的出现呢? 跨域又是什么呢?为何要跨域? 浏览器的同源策略又是什么?怎么解决? jsonp又是什么? ... ][Link 43] 博文 [来自：  yijiupingfan0914的博客][yijiupingfan0914]

[ ][Link 44]

#### web*跨**域**解决*方案 ####

08-28  阅读数 466

[  目录什么是跨域常用的几种跨域处理方法：跨域的原理解析及实现方法1、JSONP（JSONwithpadding） 2、CORS策略3、document.domain+iframe的设置 (只有在主域... ][Link 44] 博文 [来自：  lyn1772671980的博客][lyn1772671980]

[ ][Link 45]

#### Ajax*跨**域*调用Restful接口 JSONP和CORS两种*解决*方案详解 ####

09-05  阅读数 3531

[ 最近工作中遇到了一个需求，需要Ajax跨域调取Restful接口获取数据。因为本次需求仅用到GET请求，经过几番波折，最终采用JSONP方式(仅支持GET方式请求)实现。但是本篇文章将顺带介绍另一种更... ][Link 45] 博文 [来自：  小猪1993的博客][_1993]

[ ][Link 46]

#### *解决*ajax*跨**域*问题【5种*解决*方案】 ####

09-02  阅读数 1万+

[ 什么是跨域问题?跨域问题来源于JavaScript的"同源策略"，即只有协议+主机名+端口号(如存在)相同，则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他... ][Link 46] 博文 [来自：  itcats\_cn的博客][itcats_cn]

[ ][Link 47]

#### 浅谈*解决*前端*跨**域*的两个*方法* ####

06-22  阅读数 6325

[ 在前端开发中在使用Ajax调用后端接口的时候经常会遇到跨域的问题,导致不能拿到后端接口返回的数据.下面我们来看看解决跨域的几个方法.在解决跨域问题的前,我们先来了解一下什么是跨域,跨域:即请求的地址与... ][Link 47] 博文 [来自：  Mr.桐先生的博客][Mr.]

[ ][Link 48]

#### 浏览器*跨**域*详解 ####

11-04  阅读数 1195

[ 一.什么是跨域跨域问题来源于浏览器的同源策略，浏览器为了提高网站的安全性，在发送ajax请求时，只有在当前页面地址与请求地址的协议+域名+端口号相同时才允许访问，否则会被拦截。协议即通信协议，比如我们... ][Link 48] 博文 [来自：  GuoZebin的博客][GuoZebin]

[ ][Link 49]

#### *跨**域**解决*方案（一）详细篇 ####

03-28  阅读数 819

[ 一、前言跨域问题在前端已经是老生常谈了，本文围绕着为什么产生跨域以及几种解决方案详细说明。二、跨域起源说到跨域不得不提到浏览器的同源策略（1995年，Netscape公司提出的，现在适用于所有浏览器）... ][Link 49] 博文 [来自：  回眸一笑][Link 50]

[ ][Link 51]

#### AJAX*跨**域*产生原因及*解决**方法* ####

06-11  阅读数 4400

[ 什么是跨域： 跨域问题来源于JavaScript的同源策略，即只有协议+主机名+端口号(如存在)相同，则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源，不能访问和... ][Link 51] 博文 [来自：  一杯蓝莓][Link 52]

[ ][Link 53]

#### *跨**域*的常见*解决**方法* ####

06-12  阅读数 29

[ 1、后端处理（开启跨域）2、前端处理－jsonp3、Cors4、http-proxy-middleware ][Link 53] 博文 [来自：  weixin\_44756169的博客][weixin_44756169]

<div class="recommend-item-box type_hot_word">
                                <div class="content clearfix">
                    <div class="float-left">
                                        <span>
                        <a href="https://www.csdn.net/gather_13/NtTaEgzsLWRvd25sb2Fk.html" target="_blank">
                        c# 返回句柄</a>
                    </span>
                                        <span>
                        <a href="https://www.csdn.net/gather_15/NtTaEg0sLWRvd25sb2Fk.html" target="_blank">
                        c# update中文</a>
                    </span>
                                        <span>
                        <a href="https://www.csdn.net/gather_1f/NtTaEg2sLWRvd25sb2Fk.html" target="_blank">
                        c#中类的语法结构</a>
                    </span>
                                        <span>
                        <a href="https://www.csdn.net/gather_13/NtTaEg3sLWRvd25sb2Fk.html" target="_blank">
                        c# chart放大缩小</a>
                    </span>
                                        <span>
                        <a href="https://www.csdn.net/gather_1e/NtTaEg4sLWRvd25sb2Fk.html" target="_blank">
                        c# 选择打印机对话框</a>
                    </span>
                                        <span>
                        <a href="https://www.csdn.net/gather_16/NtTaEg5sLWRvd25sb2Fk.html" target="_blank">
                        c#浮点型转换为整型</a>
                    </span>
                                        <span>
                        <a href="https://www.csdn.net/gather_1c/NtTaIgwsLWRvd25sb2Fk.html" target="_blank">
                        c#数组删除元素</a>
                    </span>
                                        <span>
                        <a href="https://www.csdn.net/gather_10/NtTaIgxsLWRvd25sb2Fk.html" target="_blank">
                        c# 委托例子</a>
                    </span>
                                        <span>
                        <a href="https://www.csdn.net/gather_15/NtTaIgysLWRvd25sb2Fk.html" target="_blank">
                        c# 出提示音</a>
                    </span>
                                        <span>
                        <a href="https://www.csdn.net/gather_12/NtTaIgzsLWRvd25sb2Fk.html" target="_blank">
                        c# exe緩存</a>
                    </span>
                                        </div>
                </div>
                                </div>
                            <div class="recommend-loading-box">
                <img src='https://csdnimg.cn/release/phoenix/images/feedLoading.gif'>
            </div>
            <div class="recommend-end-box">
                <p class="text-center">没有更多推荐了，<a href="https://blog.csdn.net/" class="c-blue c-blue-hover c-blue-focus">返回首页</a></p>
            </div>
        </div>
                    <div class="template-box">
                <span>博客模板©2019 </span><span class="point"></span><span>由CSDN提供</span><span class="point"></span>
            <span>模版主题为：skin-whitemove by
                                    上身试试                                设计
            </span>
            </div>
            </main>
    
    <aside>
    <div id="asideProfile" class="aside-box">
    
    <div class="profile-intro d-flex">
        <div class="avatar-box d-flex justify-content-center flex-column">
            <a href="https://blog.csdn.net/qq_38128179">
              <img src="https://avatar.csdn.net/4/0/F/3_qq_38128179.jpg" class="avatar_pic" username = 'qq_38128179'>
                              <img src="https://g.csdnimg.cn/static/user-reg-year/1x/2.png" class="user-years">
                          </a>
            
        </div>
        <div class="user-info d-flex flex-column">
            <p class="name csdn-tracking-statistics tracking-click" data-report-click='{"mod":"popu_379"}' username='qq_38128179'>
                <a href="https://blog.csdn.net/qq_38128179"  class="" id="uid" title='@Demi'>@Demi</a>
            </p>
                                        <p class="personal-home-page" style = 'right:-96px;'><a target="_blank"  href="https://me.csdn.net/qq_38128179">TA的个人主页 ></a></p>
                    </div>
                <div class = 'profile-personal-letter'>
            <a id = 'profile-personal-alink' href="" target="_blank" rel="noopener">私信</a>
        </div>
        <div class="opt-box d-flex  flex-column">
            <span  class="csdn-tracking-statistics tracking-click" data-report-click='{"mod":"popu_379"}'>
                                    <a class="btn btn-sm btn-red-hollow attention" id="btnAttent" style = 'line-height:24px;padding:0;'>关注</a>
                            </span>
        </div>
            </div>
    <div class="data-info d-flex item-tiling">
                <dl class="text-center" title="80">
                        <dt><a href="https://blog.csdn.net/qq_38128179?t=1">原创</a></dt>
            <dd><a href="https://blog.csdn.net/qq_38128179?t=1"><span class="count">80</span></a></dd>
                    </dl>
        <dl class="text-center" id="fanBox" title="59">
            <dt>粉丝</dt>
            <dd><span class="count" id="fan">59</span></dd>
        </dl>
        <dl class="text-center" title="106">
            <dt>喜欢</dt>
            <dd><span class="count">106</span></dd>
        </dl>
        <dl class="text-center" title="30">
            <dt>评论</dt>
            <dd><span class="count">30</span></dd>
        </dl>
    </div>
    <div class="grade-box clearfix">
        <dl>
            <dt>等级：</dt>
            <dd>
                <a href="https://blog.csdn.net/home/help.html#level" title="4级,点击查看等级说明" target="_blank">
                    <svg class="icon icon-level" aria-hidden="true">
                        <use xlink:href="#csdnc-bloglevel-4"></use>
                    </svg>
                </a>
            </dd>
        </dl>
        <dl>
            <dt>访问：</dt>
            <dd title="108394">
                10万+            </dd>
        </dl>
        <dl>
            <dt>积分：</dt>
            <dd title="1765">
                1765            </dd>
        </dl>
        <dl title="43679">
            <dt>排名：</dt>
            <dd>4万+</dd>
        </dl>
    </div>
        <div class="badge-box d-flex">
        <span>勋章：</span>
        <div class="badge d-flex">
                                                        <div class="icon-badge" title="GitHub">
                       <div class="mouse-box">
                          <img src="https://g.csdnimg.cn/static/user-medal/github.svg" alt="">
                          <div class="icon-arrow"></div>
                       </div>
                       <div class="grade-detail-box">
                           <div class="pos-box">
                               <div class="left-box d-flex justify-content-center align-items-center flex-column">
                                    <img src="https://g.csdnimg.cn/static/user-medal/github.svg" alt="">
                                   <p>GitHub</p>
                               </div>
                               <div class="right-box">
                                   绑定GitHub第三方账户获取                               </div>
                           </div>
                       </div>
                   </div>
                                                             <div class="icon-badge" title="持之以恒">
                       <div class="mouse-box">
                          <img src="https://g.csdnimg.cn/static/user-medal/chizhiyiheng.svg" alt="">
                          <div class="icon-arrow"></div>
                       </div>
                       <div class="grade-detail-box">
                           <div class="pos-box">
                               <div class="left-box d-flex justify-content-center align-items-center flex-column">
                                    <img src="https://g.csdnimg.cn/static/user-medal/chizhiyiheng.svg" alt="">
                                   <p>持之以恒</p>
                               </div>
                               <div class="right-box">
                                   授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里，不积小流无以成江海，程序人生的精彩需要坚持不懈地积累！                               </div>
                           </div>
                       </div>
                   </div>
                                                             <div class="icon-badge" title="勤写标兵Lv1">
                       <div class="mouse-box">
                          <img src="https://g.csdnimg.cn/static/user-medal/qinxiebiaobing_l1_t4.svg" alt="">
                          <div class="icon-arrow"></div>
                       </div>
                       <div class="grade-detail-box">
                           <div class="pos-box">
                               <div class="left-box d-flex justify-content-center align-items-center flex-column">
                                    <img src="https://g.csdnimg.cn/static/user-medal/qinxiebiaobing_l1_t4.svg" alt="">
                                   <p>勤写标兵Lv1</p>
                               </div>
                               <div class="right-box">
                                   授予每个自然周发布1篇到3篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。                               </div>
                           </div>
                       </div>
                   </div>
                                             </div>
        <script>
            (function ($) {
                setTimeout(function(){
                    $('div.icon-badge.show-moment').removeClass('show-moment');
                }, 5000);
            })(window.jQuery)
        </script>
    </div>
    </div>

### 最新文章 ###

*  [ vue-cli脚手架搭建项目及Axios封装 ][vue-cli_Axios_]
 *  [ 重绘和重排（回流） ][Link 54]
 *  [ Sass基本用法 ][Sass_]
 *  [ 使用深度作用选择器 /deep/修改 element-ui iview 框架自带样式 ][_ _deep_ element-ui iview _]
 *  [ Data URI详细介绍 ][Data URI_]

### 分类专栏 ###

*  [ ![2019091813595558.png][] HTML 5篇 ][_2019091813595558.png_ HTML 5_]
 *  [ ![20190918140053667.png][] CSS 9篇 ][_20190918140053667.png_ CSS 9_]
 *  [ ![20190918140158853.png][] JavaScript 27篇 ][JavaScript]
 *  [ ![20190918140213434.png][] JQuery 1篇 ][_20190918140213434.png_ JQuery 1_]
 *  [ ![20190918140158853.png][] CSDN使用教程 1篇 ][_20190918140158853.png_ CSDN_ 1_]
 *  [ ![20190918140158853.png][] 工具 4篇 ][_20190918140158853.png_ _ 4_]
 *  [ ![20190918140129601.png][] 移动端 1篇 ][_20190918140129601.png_ _ 1_]
 *  [ ![20190918135101160.png][] 微信小程序 2篇 ][_20190918135101160.png_ _ 2_]
 *  [ ![20190918140012416.png][] 前端自动化工具 2篇 ][_20190918140012416.png_ _ 2_]
 *  [ ![20190918135101160.png][] Git版本控制系统 2篇 ][_20190918135101160.png_ Git_ 2_]
 *  [ ![20190918140145169.png][] 浏览器 6篇 ][Link 1]
 *  [ ![20190918140053667.png][] HTTP协议 5篇 ][_20190918140053667.png_ HTTP_ 5_]
 *  [ ![20190918140053667.png][] VUE 13篇 ][_20190918140053667.png_ VUE 13_]
 *  [ ![20190918140213434.png][] 计算机 12篇 ][_20190918140213434.png_ _ 12_]
 *  [ ![20190918140012416.png][] 丁小厨成长之路 2篇 ][_20190918140012416.png_ _ 2_ 1]

展开

### 归档 ###

*  [ 2019年9月 5篇 ][2019_9_ 5_]
 *  [ 2019年8月 5篇 ][2019_8_ 5_]
 *  [ 2019年7月 4篇 ][2019_7_ 4_]
 *  [ 2019年6月 4篇 ][2019_6_ 4_]
 *  [ 2019年5月 5篇 ][2019_5_ 5_]
 *  [ 2019年4月 5篇 ][2019_4_ 5_]
 *  [ 2019年3月 4篇 ][2019_3_ 4_]
 *  [ 2019年2月 1篇 ][2019_2_ 1_]
 *  [ 2019年1月 13篇 ][2019_1_ 13_]
 *  [ 2018年12月 14篇 ][2018_12_ 14_]
 *  [ 2018年11月 7篇 ][2018_11_ 7_]
 *  [ 2018年10月 1篇 ][2018_10_ 1_]
 *  [ 2018年9月 3篇 ][2018_9_ 3_]
 *  [ 2018年6月 9篇 ][2018_6_ 9_]

展开

### 热门文章 ###

*      <a href="https://blog.csdn.net/qq_38128179/article/details/84956552" >
                                                    什么是跨域？跨域解决方法                    </a>
        				<p class="read">阅读数 <span>22714</span></p>
        			</li>
        						<li>
        
        				<a href="https://blog.csdn.net/qq_38128179/article/details/80794397" >
                                                    display:none和visibility:hidden两者的区别                    </a>
        				<p class="read">阅读数 <span>15123</span></p>
        			</li>
        						<li>
        
        				<a href="https://blog.csdn.net/qq_38128179/article/details/82799181" >
                                                    HTML+JS 实现下载图片到本地                    </a>
        				<p class="read">阅读数 <span>12401</span></p>
        			</li>
        						<li>
        
        				<a href="https://blog.csdn.net/qq_38128179/article/details/84661602" >
                                                    微信小程序操作dom元素节点  wx.createSelectorQuery()                    </a>
        				<p class="read">阅读数 <span>9348</span></p>
        			</li>
        						<li>
        
        				<a href="https://blog.csdn.net/qq_38128179/article/details/85161910" >
                                                    回到顶部的几种实现方法                    </a>
        				<p class="read">阅读数 <span>5524</span></p>
        			</li>
        				</ul>
        </div>

### 最新评论 ###

*  [什么是跨域？跨域解决方法][Link 55]
    
    [qq\_43796976：][qq_43796976]一个项目中跑两个子项目，ip,端口都是同一个，都是HTTP协议，算跨域吗
 *  [理解同步异步与阻塞非阻塞的区别][Link 56]
    
    [ieen\_csdn：][ieen_csdn]同步等待，异步调用; 阻塞，非阻塞，调用等待过程是否可以处理其他操作 拨开云雾
 *  [理解同步异步与阻塞非阻塞的区别][Link 56]
    
    [Java\_Twinkle：][Java_Twinkle]异步调用期间可以做其他的事啊
 *  [HTML+JS 实现下载图片到本地][HTML_JS]
    
    [zj00zj00zj00：][zj00zj00zj00]赞一个
 *  [蒜泥剁椒花甲][Link 57]
    
    [qq\_33994566：][qq_33994566]程序员界的一股清流。看着是真馋啊

<div class="aside-box">
    		<div id="kp_box_57" data-pid="57"><script type="text/javascript">
    (function() {
        var s = "_" + Math.random().toString(36).slice(2);
        document.write('<div style="" id="' + s + '"></div>');
        (window.slotbydup = window.slotbydup || []).push({
            id: "u3163270",
            container:  s
        });
    })();

*  点赞 取消点赞
    
    11
 *  海报 
    
    [ ][Link 58]
    
    分享海报说明
    
        </li>
        	<li class="to-commentBox">
        					<a class="btn-comments long-height hover-box" title="写评论" href="#commentBox">
        			<svg class="icon hover-hide" aria-hidden="true">
        				<use xlink:href="#csdnc-comments"></use>
        			</svg>
        			<span class="hover-show text">评论</span>
        			<p class="">
        					1				</p>
        		</a>
        	</li>
        	<li class="toc-container-box" id="liTocBox">
        		<a class="btn-toc low-height hover-box btn-comments" title="目录">
        			<svg class="icon hover-hide" aria-hidden="true">
        				<use xlink:href="#csdnc-contents"></use>
        			</svg>
        			<span class="hover-show text">目录</span>
        		</a>
        		<div class="toc-container">
        			<div class="pos-box">
        				<div class="icon-arrow"></div>
        				<div class="scroll-box">
        					<div class="toc-box"></div>
        				</div>
        			</div>
        			<div class="opt-box">
        				<button class="btn-opt prev nomore" title="向上">
        					<svg class="icon" aria-hidden="true">
        						<use xlink:href="#csdnc-chevronup"></use>
        					</svg>
        				</button>
        				<button class="btn-opt next">
        					<svg class="icon" aria-hidden="true">
        						<use xlink:href="#csdnc-chevrondown"></use>
        					</svg>
        				</button>
        			</div>
        		</div>
        	</li>
        	<li>
        		<a class="btn-bookmark low-height hover-box btn-comments" title="收藏">
        			<svg class="icon active hover-hide" aria-hidden="true">
        				<use xlink:href="#csdnc-bookmark-ok"></use>
        			</svg>
        			<svg class="icon no-active hover-hide" aria-hidden="true">
        				<use xlink:href="#csdnc-bookmark"></use>
        			</svg>
        				<span class="hover-show text">收藏</span>
        			
        		</a>
        	</li>
        	<li class="bdsharebuttonbox">
        		<div class="weixin-qr btn-comments low-height hover-box" >
            <a href="#" class="bds_weixin clear-share-style" data-cmd="weixin" title="手机看"></a>
        			<svg class="icon hover-hide" aria-hidden="true">
        				<use xlink:href="#csdnc-usephone"></use>
        			</svg>
        			<span class="hover-show text text3">
        				手机看
        			</span>
        		</div>
        	</li>
        						<li class="widescreen-hide">
        			<a class="prev btn-comments low-height hover-box" href="https://blog.csdn.net/qq_38128179/article/details/84788912" title="package.json文件解析">
        				<svg class="icon hover-hide" aria-hidden="true">
        					<use xlink:href="#csdnc-chevronleft"></use>
        				</svg>
        				<span class="hover-show text text3">上一篇</span>
        			</a>
        		</li>
        							<li class="widescreen-hide">
        		<a class="next btn-comments hover-box low-height" href="https://blog.csdn.net/qq_38128179/article/details/84969285" title="git 常用操作命令">
        			<svg class="icon hover-hide" aria-hidden="true">
        				<use xlink:href="#csdnc-chevronright"></use>
        			</svg>
        			<span class="hover-show text text3">下一篇</span>
        		</a>
        	</li>
        					
        	<li class="widescreen-more">
        		<a class="btn-comments chat-ask-button low-height hover-box" title="快问" href="#chatqa">
        			<svg class="icon hover-hide" aria-hidden="true">
        				<use xlink:href="#csdnc-more"></use>
        			</svg>
        			<span class="hover-show text">更多</span>
        			
        		</a>
        		<ul class="widescreen-more-box">
        												<li class="widescreen-more">
        					<a class="btn-comments low-height hover-box" href="https://blog.csdn.net/qq_38128179/article/details/84788912" title="package.json文件解析">
        						<svg class="icon hover-hide" aria-hidden="true">
        							<use xlink:href="#csdnc-chevronleft"></use>
        						</svg>
        						<span class="hover-show text text3">上一篇</span>
        					</a>
        				</li>
        															<li class="widescreen-more">
        				<a class="btn-comments hover-box low-height" href="https://blog.csdn.net/qq_38128179/article/details/84969285" title="git 常用操作命令">
        					<svg class="icon hover-hide" aria-hidden="true">
        						<use xlink:href="#csdnc-chevronright"></use>
        					</svg>
        					<span class="hover-show text text3">下一篇</span>
        				</a>
        			</li>
        						</ul>
        	</li>
        </ul>

![postShareBack.png][]

![Image 1][]

[https_segmentfault.com_a_1190000000709909]: https://segmentfault.com/a/1190000000709909
[https_blog.csdn.net_qq_38128179_article_details_84956552]: https://blog.csdn.net/qq_38128179/article/details/84956552
[Image 1]: 
[Demi]: https://me.csdn.net/qq_38128179
[JavaScript]: https://blog.csdn.net/qq_38128179/article/category/7722603
[Link 1]: https://blog.csdn.net/qq_38128179/article/category/8533401
[Link 2]: http://creativecommons.org/licenses/by-sa/4.0/
[Link 3]: https://blog.csdn.net/lambert310/article/details/51683775
[L]: https://blog.csdn.net/lambert310
[Link 4]: https://blog.csdn.net/weixin_42039396/article/details/80040099
[weixin_42039396]: https://blog.csdn.net/weixin_42039396
[Link 5]: https://blog.csdn.net/weixin_33747129/article/details/94166145
[weixin_33747129]: https://blog.csdn.net/weixin_33747129
[Link 6]: https://blog.csdn.net/ysvae/article/details/82121161
[YSOcean]: https://blog.csdn.net/ysvae
[Link 7]: https://blog.csdn.net/yzh18373476791/article/details/83822522
[Link 8]: https://blog.csdn.net/yzh18373476791
[Link 9]: https://blog.csdn.net/hammring/article/details/100014130
[hammring]: https://blog.csdn.net/hammring
[Link 10]: https://blog.csdn.net/msg1254765721/article/details/90090198
[Msgyvcici]: https://blog.csdn.net/msg1254765721
[Link 11]: https://blog.csdn.net/sinat_17775997/article/details/79608232
[Link 12]: https://blog.csdn.net/sinat_17775997
[Link 13]: https://blog.csdn.net/lirunhui6/article/details/83035459
[lirunhui6]: https://blog.csdn.net/lirunhui6
[Link 14]: https://blog.csdn.net/BtWangZhi/article/details/91129277
[BtWangZhi]: https://blog.csdn.net/BtWangZhi
[Link 15]: https://blog.csdn.net/cuixiaogang110/article/details/81948173
[Link 16]: https://blog.csdn.net/cuixiaogang110
[Link 17]: https://blog.csdn.net/qq_23832313/article/details/81946838
[Link 18]: https://blog.csdn.net/qq_23832313
[Link 19]: https://blog.csdn.net/lareinalove/article/details/84107476
[lareinalove]: https://blog.csdn.net/lareinalove
[Link 20]: https://blog.csdn.net/badmoonc/article/details/82289252
[badmoonc]: https://blog.csdn.net/badmoonc
[Link 21]: https://blog.csdn.net/weixin_40690385/article/details/81276659
[weixin_40690385]: https://blog.csdn.net/weixin_40690385
[Link 22]: https://blog.csdn.net/ouzhuangzhuang/article/details/83826868
[Link 23]: https://blog.csdn.net/ouzhuangzhuang
[Link 24]: https://blog.csdn.net/qq_36898043/article/details/79666736
[LZJWXJ]: https://blog.csdn.net/qq_36898043
[Link 25]: https://blog.csdn.net/godloveyuxu/article/details/73089780
[Charles_ home]: https://blog.csdn.net/godloveyuxu
[Link 26]: https://blog.csdn.net/eeeecw/article/details/80600488
[eeeecw]: https://blog.csdn.net/eeeecw
[Link 27]: https://blog.csdn.net/WiliamYao/article/details/78748906
[William.Yao]: https://blog.csdn.net/WiliamYao
[Link 28]: https://blog.csdn.net/qq_41858479/article/details/83381406
[qq_41858479]: https://blog.csdn.net/qq_41858479
[Link 29]: https://blog.csdn.net/lin453701006/article/details/86671042
[Link 30]: https://blog.csdn.net/lin453701006
[Link 31]: https://blog.csdn.net/qq_35840499/article/details/89893892
[Link 32]: https://blog.csdn.net/qq_35840499
[Link 33]: https://blog.csdn.net/shan1991fei/article/details/79430542
[Link 34]: https://blog.csdn.net/shan1991fei
[Link 35]: https://blog.csdn.net/weixin_34281537/article/details/89002809
[weixin_34281537]: https://blog.csdn.net/weixin_34281537
[Link 36]: https://blog.csdn.net/weixin_30363263/article/details/81587025
[Link 37]: https://blog.csdn.net/weixin_30363263
[Link 38]: https://blog.csdn.net/qq_36140085/article/details/81606508
[Link 39]: https://blog.csdn.net/qq_36140085
[Link 40]: https://blog.csdn.net/lianzhang861/article/details/84871369
[lianzhang861]: https://blog.csdn.net/lianzhang861
[Link 41]: https://blog.csdn.net/bobozai86/article/details/78708996
[bobozai86]: https://blog.csdn.net/bobozai86
[Link 42]: https://blog.csdn.net/meism5/article/details/90414283
[ConstXiong]: https://blog.csdn.net/meism5
[Link 43]: https://blog.csdn.net/yijiupingfan0914/article/details/82495121
[yijiupingfan0914]: https://blog.csdn.net/yijiupingfan0914
[Link 44]: https://blog.csdn.net/lyn1772671980/article/details/82146967
[lyn1772671980]: https://blog.csdn.net/lyn1772671980
[Link 45]: https://blog.csdn.net/xiaozhu_dq/article/details/82423618
[_1993]: https://blog.csdn.net/xiaozhu_dq
[Link 46]: https://blog.csdn.net/itcats_cn/article/details/82318092
[itcats_cn]: https://blog.csdn.net/itcats_cn
[Link 47]: https://blog.csdn.net/sinat_28296757/article/details/80771082
[Mr.]: https://blog.csdn.net/sinat_28296757
[Link 48]: https://blog.csdn.net/qq_41635167/article/details/83720985
[GuoZebin]: https://blog.csdn.net/qq_41635167
[Link 49]: https://blog.csdn.net/weixin_44135121/article/details/88863018
[Link 50]: https://blog.csdn.net/weixin_44135121
[Link 51]: https://blog.csdn.net/qq_34322080/article/details/79912374
[Link 52]: https://blog.csdn.net/qq_34322080
[Link 53]: https://blog.csdn.net/weixin_44756169/article/details/90906188
[weixin_44756169]: https://blog.csdn.net/weixin_44756169
[vue-cli_Axios_]: https://blog.csdn.net/qq_38128179/article/details/101194569
[Link 54]: https://blog.csdn.net/qq_38128179/article/details/101023305
[Sass_]: https://blog.csdn.net/qq_38128179/article/details/100989554
[_ _deep_ element-ui iview _]: https://blog.csdn.net/qq_38128179/article/details/100919337
[Data URI_]: https://blog.csdn.net/qq_38128179/article/details/100663085
[2019091813595558.png]: https://img-blog.csdnimg.cn/2019091813595558.png
[_2019091813595558.png_ HTML 5_]: https://blog.csdn.net/qq_38128179/article/category/7722600
[20190918140053667.png]: https://img-blog.csdnimg.cn/20190918140053667.png
[_20190918140053667.png_ CSS 9_]: https://blog.csdn.net/qq_38128179/article/category/7722602
[20190918140158853.png]: https://img-blog.csdnimg.cn/20190918140158853.png
[20190918140213434.png]: https://img-blog.csdnimg.cn/20190918140213434.png
[_20190918140213434.png_ JQuery 1_]: https://blog.csdn.net/qq_38128179/article/category/7722605
[_20190918140158853.png_ CSDN_ 1_]: https://blog.csdn.net/qq_38128179/article/category/7744976
[_20190918140158853.png_ _ 4_]: https://blog.csdn.net/qq_38128179/article/category/7746153
[20190918140129601.png]: https://img-blog.csdnimg.cn/20190918140129601.png
[_20190918140129601.png_ _ 1_]: https://blog.csdn.net/qq_38128179/article/category/8399827
[20190918135101160.png]: https://img-blog.csdnimg.cn/20190918135101160.png
[_20190918135101160.png_ _ 2_]: https://blog.csdn.net/qq_38128179/article/category/8418073
[20190918140012416.png]: https://img-blog.csdnimg.cn/20190918140012416.png
[_20190918140012416.png_ _ 2_]: https://blog.csdn.net/qq_38128179/article/category/8492742
[_20190918135101160.png_ Git_ 2_]: https://blog.csdn.net/qq_38128179/article/category/8526843
[20190918140145169.png]: https://img-blog.csdnimg.cn/20190918140145169.png
[_20190918140053667.png_ HTTP_ 5_]: https://blog.csdn.net/qq_38128179/article/category/8541119
[_20190918140053667.png_ VUE 13_]: https://blog.csdn.net/qq_38128179/article/category/8566089
[_20190918140213434.png_ _ 12_]: https://blog.csdn.net/qq_38128179/article/category/8597007
[_20190918140012416.png_ _ 2_ 1]: https://blog.csdn.net/qq_38128179/article/category/8606130
[2019_9_ 5_]: https://blog.csdn.net/qq_38128179/article/month/2019/09
[2019_8_ 5_]: https://blog.csdn.net/qq_38128179/article/month/2019/08
[2019_7_ 4_]: https://blog.csdn.net/qq_38128179/article/month/2019/07
[2019_6_ 4_]: https://blog.csdn.net/qq_38128179/article/month/2019/06
[2019_5_ 5_]: https://blog.csdn.net/qq_38128179/article/month/2019/05
[2019_4_ 5_]: https://blog.csdn.net/qq_38128179/article/month/2019/04
[2019_3_ 4_]: https://blog.csdn.net/qq_38128179/article/month/2019/03
[2019_2_ 1_]: https://blog.csdn.net/qq_38128179/article/month/2019/02
[2019_1_ 13_]: https://blog.csdn.net/qq_38128179/article/month/2019/01
[2018_12_ 14_]: https://blog.csdn.net/qq_38128179/article/month/2018/12
[2018_11_ 7_]: https://blog.csdn.net/qq_38128179/article/month/2018/11
[2018_10_ 1_]: https://blog.csdn.net/qq_38128179/article/month/2018/10
[2018_9_ 3_]: https://blog.csdn.net/qq_38128179/article/month/2018/09
[2018_6_ 9_]: https://blog.csdn.net/qq_38128179/article/month/2018/06
[Link 55]: https://blog.csdn.net/qq_38128179/article/details/84956552#comments
[qq_43796976]: https://my.csdn.net/qq_43796976
[Link 56]: https://blog.csdn.net/qq_38128179/article/details/86132731#comments
[ieen_csdn]: https://my.csdn.net/ieen_csdn
[Java_Twinkle]: https://my.csdn.net/Java_Twinkle
[HTML_JS]: https://blog.csdn.net/qq_38128179/article/details/82799181#comments
[zj00zj00zj00]: https://my.csdn.net/zj00zj00zj00
[Link 57]: https://blog.csdn.net/qq_38128179/article/details/86354827#comments
[qq_33994566]: https://my.csdn.net/qq_33994566
[Link 58]: https://blogdev.blog.csdn.net/article/details/99646245
[postShareBack.png]: https://csdnimg.cn/release/phoenix/write/assets/postShareBack.png