<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          web網站ajax跨域方法總結與解決方案

          時間:?2017-10-30閱讀:?895標簽:?跨域

          web前端的同學如果使用ajax,如果請求后端地址和頁面訪問的地址“URL的首部”不同就會出現訪問被拒絕的情況,這就需要跨域來解決前后端的通訊問題,下面將列舉一些在實際項目中應用也是比較多的方法。


          服務器反向代理解決跨域

          指以代理服務器來接受internet上的連接請求,然后將請求轉發給內部網絡上的服務器,并將從服務器上得到的結果返回給internet上請求連接的客戶端,此時代理服務器對外就表現為一個反向代理服務器。  這里已nginx和node來實現如下:

          //文件ngix.conf添加代碼

          location ~ /api {
                 //請求后端的地址
          	proxy_pass   http://www.b.com:8080;
          }

          //node的代理如下

          proxyTable: {
                '/api': {
                  target: 'http://www.b.com:8080/',
                  changeOrigin: true,
                  //pathRewrite: {'^/api': '/'}是否重寫
                }
              },

          說明:如果頁面url為http://www.a.com的頁面需要ajax請求后端http://www.b.com:8080/api/dothis.do的地址。如果設置了反向代理,即可通過http://www.a.com/api/dothis.do來獲取數據,就很好的解決了跨域問題的同時并未暴露后端地址給用戶。


          后端通過Access-Control-Allow-Origin來解決

          Access-Control-Allow-Origin是HTML5中定義的一種解決資源跨域的策略。他是通過服務器端返回帶有Access-Control-Allow-Origin標識的Response header,用來解決資源的跨域權限問題。

          如果應許所有域名的訪問,我們可以在header中設置Access-Control-Allow-Origin: * 。

          如果應許部分域名訪問,這里將已php為例子實現如下,這里將只應許前端URL為http://www.a.com才能訪問:

          $origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';
                  $allow_origin = array(
                      'http://www.a.com',
                  );
                  if(in_array($origin, $allow_origin)){
                      header('Access-Control-Allow-Origin:'.$origin);
                  }


          jsonp解決get請求的跨域

          json是一個非官方的協議,它允許在服務器端集成Script tags返回至客戶端,通過javascript callback的形式實現跨域訪問。它的局限性主要是支持Get,

          這里已php為例返回如下:

          <?php
             $data = array();//需要返回的數據
             $callback = $_GET['callback'];
             echo $callback.'('.json_encode($data).')';
             exit;
          ?>

          前端已jquery的ajax請求為例,它封裝了jsonp的實現

          $.ajax({
              type : "get"http://如果
              url : "www.b.com:8080",
              dataType : "jsonp",
              jsonp: "callback",//傳遞給請求處理程序或頁面的,用以獲得jsonp回調函數名的參數名
              success:function(json){},
              error:function(){}
          });

          這里網上找了一篇原生JS的實現,代碼如下:

          function ajax(params) {  
           params = params || {};  
           params.data = params.data || {};  
           var json = params.jsonp ? jsonp(params) : json(params);   
           // jsonp請求  
           function jsonp(params) {  
            //創建script標簽并加入到頁面中  
            var callbackName = params.jsonp;  
            var head = document.getElementsByTagName('head')[0];  
            // 設置傳遞給后臺的回調參數名  
            params.data['callback'] = callbackName;  
            var data = formatParams(params.data);  
            var script = document.createElement('script');  
            head.appendChild(script);  
            //創建jsonp回調函數  
            window[callbackName] = function(json) {  
            head.removeChild(script);  
            clearTimeout(script.timer);  
            window[callbackName] = null;  
            params.success && params.success(json);  
            };  
            //發送請求  
            script.src = params.url + '?' + data;  
            //為了得知此次請求是否成功,設置超時處理  
            if(params.time) {  
             script.timer = setTimeout(function() {  
              window[callbackName] = null;  
              head.removeChild(script);  
              params.error && params.error({  
               message: '超時' 
              });  
             }, time);  
            }  
           };  
           //格式化參數  
           function formatParams(data) {  
            var arr = [];  
            for(var name in data) {  
             arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));  
            };  
            // 添加一個隨機數,防止緩存  
            arr.push('v=' + random()); 
            return arr.join('&');  
           }  
           // 獲取隨機數  
           function random() {  
            return Math.floor(Math.random() * 10000 + 500);  
           }
          }


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/27

          總結解決跨域的幾個方法

          跨域:指的是瀏覽器不能執行其他網站的腳本。它是由瀏覽器的同源策略造成的,是瀏覽器對 javascript 施加的安全限制。同源策略:是指協議,域名,端口都要相同

          Vue開發環境跨域訪問

          Vue開發環境跨域訪問其他服務器或者本機其他端口,需要配置項目中config/index.js文件,修改如下,這樣你通過axios 或fetche訪問 /api/** 便相當于跨域訪問了

          JSONP跨域請求數據的三種方式

          原生方式需要定義一個回調函數,用來接收和處理數據。獲取數據的地址包含這個回調函數名。新建一個<script>標簽,地址賦值給標簽的src。

          緩存竟也能導致跨域問題!

          由于頁面設計需要,頁面展示圖片,并可點擊下載按鈕進行下載(需要前端打包多個圖片,所以需要使用ajax請求圖片獲得二進制內容,不能直接使用img或a進行下載),如圖:

          node.js如何配置跨域?

          在node.js中可以使用res.header()方法來配置跨域。res.header()方法可以用來設置允許跨域的域名、允許的header類型、跨域允許的請求方式等。

          Angular怎么實現跨域?

          跨域,前端開發中常常遇到的問題。AngularJS實現跨域方式類似于Ajax,使用CORS機制。以下闡述一下AngularJS中使用$http實現跨域請求數據。指定callback和回調函數名,函數名為JSON_CALLBACK時,會調用success回調函數。JSON_CALLBACK必須全為大寫。

          js跨域訪問問題

          這里說的js跨域是指通過js在不同的域之間進行數據傳輸或通信,比如用ajax向一個不同的域請求數據,或者通過js獲取頁面中不同域的框架中(iframe)的數據。只要協議、域名、端口有任何一個不同,都被當作是不同的域。如果進行跨域訪問

          你應該了解的CORS

          如果你和我一樣,第一次遇到 CORS (跨域資源共享),你想讓服務器接收那些你拼接的 Ajax 請求并處理他們。所以你去 stackoverflow.com 復制一段代碼來設置一些 HTTP Headers ,讓請求可以正常工作

          reactjs中配置代理跨域

          第一步,下載依賴 http-proxy-middleware;第二步,在src下建立setupProxy.js;第三步,在數據請求中直接請求,在真實url后添加/api即可,eg

          nginx 反向代理處理跨域問題

          正向代理是你發出請求的時候先經過代理服務器,所以實際上發出請求的是代理服務器。反向代理是“代理你的目標服務器”,請求目標服務器的代理,做一些處理后再真正請求。在這篇文章里,反向代理用于處理跨域問題。

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网