<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          什么是跨域? 出現(xiàn)原因及解決方法

          共 1739字,需瀏覽 4分鐘

           ·

          2021-08-11 14:34

          作者:HZM_無止境
          來源:SegmentFault 思否社區(qū)

          1.跨域是什么意思?
          首先一個url是由:協(xié)議、域名、端口 三部分組成。(一般端口默認80)
          如:https://blog.moonlet.cn:80
          當一個請求url的協(xié)議域名端口三者之間的任意一個與當前頁面url不同即為跨域
          例如:

          2.跨域產(chǎn)生原因?
          出于瀏覽器的同源策略限制

          同源策略(Same Orgin Policy)是一種約定,它是瀏覽器核心也最基本的安全功能,它會阻止一個域的js腳本和另外一個域的內(nèi)容進行交互,如果缺少了同源策略,瀏覽器很容易受到XSS、CSFR等攻擊。

          所謂同源(即在同一個域)就是兩個頁面具有相同的協(xié)議(protocol)、主機(host)和端口號(port)。


          非同源會出現(xiàn)的限制
          • 無法讀取非同源網(wǎng)頁的cookie、localstorage等

          • 無法接觸非同源網(wǎng)頁的DOM和js對象

          • 無法向非同源地址發(fā)送Ajax請求


          3.nginx反向代理解決跨域(前端常用)
          正向代理:

          a-->b訪問不了,可以找個中間的服務器c, 先訪問c再從c到b,類似曲線救國。

          明確訪問的目的地,但是用戶不知道中間的代理服務器。(忽略中間服務器)


          反向代理:a--> c <--b
          a明確訪問c代理服務器,但是不知道c的內(nèi)容從哪里來,c反向從別的地方拿來數(shù)據(jù)。(忽略的是目標地址)

          瀏覽器可以訪問a,而服務器之間不存在跨域問題,瀏覽器先訪問a的服務器c,讓c服務器作為代理去訪問b服務器,拿到之后再返回數(shù)據(jù)給a。
          例如:
          nginx是靜態(tài)服務器,跨域請求放在api下面好管理http://www.baidu.com:80/api/user
          可以在nginx下面的config下面的nginx.conf里面配置
          從80端口進來的就攔截一下,代理到81端口

          server{
                  location /api {
                          //攔截一下
                          proxy_pass  http://www.baidu.com:81;
              }
          }

          4.添加響應頭解決跨域
          瀏覽器先詢問b,b允許a訪問
          access-control-allow-origin
          access-control-max-age
          PHP端修改header:
          header('Access-Control-Allow-Origin:*');//允許所有來源訪問
          header('Access-Control-Allow-Method:POST,GET');//允許訪問的方式

          5.通過jsonp解決跨域(老方法)
          實現(xiàn)原理:通常為了減輕web服務器的負載,我們把js、css、圖片等靜態(tài)資源分離到另一臺獨立域名的服務器上,在html頁面中再通過相應的標簽從不同域名下加載靜態(tài)資源,而被瀏覽器允許。
          html中有的標簽天然支持跨域,比如<script src="http://www.baidu.com"></script>但是只支持get請求。


          點擊左下角閱讀原文,到 SegmentFault 思否社區(qū) 和文章作者展開更多互動和交流,掃描下方”二維碼“或在“公眾號后臺回復“ 入群 ”即可加入我們的技術交流群,收獲更多的技術文章~

          - END -


          瀏覽 24
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          評論
          圖片
          表情
          推薦
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  国内操逼网站 | 国产黄色大全 | 欧美成人三级在线播放 | 亚洲欧美黄 | 导航黄色一级片 |