跨域

来源:https://www.cnblogs.com/evenyao/archive/2018/08/06/9430385.html
-Advertisement-
Play Games

同源策略(Same origin Policy) 瀏覽器出於安全方面的考慮，只允許與本域下的介面交互。不同源的客戶端腳本在沒有明確授權的情況下，不能讀寫對方的資源。 本域指的是 同協議：如都是http或者https 同功能變數名稱：如都是 http://evenyao.com/a 和 http://even ...


同源策略(Same origin Policy)

瀏覽器出於安全方面的考慮，只允許與本域下的介面交互。不同源的客戶端腳本在沒有明確授權的情況下，不能讀寫對方的資源。

本域指的是

如：

不同源的例子：

對於當前頁面來說頁面存放的 JS 文件的域不重要，重要的是載入該 JS 頁面所在什麼域

報錯範例

使用 nodejs ，參考下麵代碼

//server.js 服務端 代碼
var http = require('http')
var fs = require('fs')
var url= require('url')

http.createServer(function(req,res){
  var pathObj = url.parse(req.url,true)
  console.log(pathObj)

  switch(pathObj.pathname){
    case '/getWeather':
    res.setHeader('Access-Control-Allow-Origin','http://a.com:9003')  //CORS跨域
    res.setHeader('content-Type','text/json; charset=utf-8')
      if(pathObj.query.city === 'beijing'){
        ret = {
          city:'beijing',
          weather: '晴天'
        }
      }else{
        ret = {
          city: pathObj.query.city,
          weather: '不知道'
        }
      }
      res.end(JSON.stringify(ret))
      break;
    case '/user/123':
      res.end( fs.readFileSync(__dirname + '/static/user') )
      break;
    default:
      res.end( fs.readFileSync(__dirname + '/static' + pathObj.pathname) )
  }
}).listen(9003)
console.log('visit http://localhost:9003/index.html')

<!--index.html-->
<h1>hello weather</h1>
<script>
var xhr = new XMLHttpRequest()
xhr.open('GET', 'http://127.0.0.1:9003/getWeather?city=beijing',true)
xhr.send()
xhr.onload = function(){
  console.log(JSON.parse(xhr.responseText))
}
</script>



使用Hostbuddy添加127.0.0.1的新hosts地址a.com和b.com

 

使用a.com:9003/index.html獲取數據正常 

 

使用b.com:9003/getWeather?city=beijing獲取數據報錯

 

 

跨域的幾種方法

JSONP

HTML 中 script 標簽可以載入其他域下的 JS，比如我們經常引入一個其他域下線上cdn的jQuery。那如何利用這個特性實現從其他域下獲取數據呢？

可以先這樣試試：

<script src="http://api.evenyao.com/weather.php"></script>

這時候會向天氣介面發送請求獲取數據，獲取數據後做為 js 來執行。 但這裡有個問題， 數據是 JSON 格式的數據，直接作為 JS 運行的話我如何去得到這個數據來操作呢？

這樣試試：

<script src="http://api.evenyao.com/weather.php?callback=showData"></script>

這個請求到達後端後，後端會去解析callback這個參數獲取到字元串showData，在發送數據做如下處理：

之前後端返回數據： {"city": "hangzhou", "weather": "晴天"} 現在後端返回數據： showData({"city": "hangzhou", "weather": "晴天"}) 前端script標簽在載入數據後會把 「showData({“city”: “hangzhou”, “weather”: “晴天”})」做為 js 來執行，這實際上就是調用showData這個函數，同時參數是 {“city”: “hangzhou”, “weather”: “晴天”}。 用戶只需要在載入提前在頁面定義好showData這個全局函數，在函數內部處理參數即可。

<script>
function showData(ret){
console.log(ret);
}
</script>
<script src="http://api.evenyao.com/weather.php?callback=showData"></script>

JSONP(JSON with padding)，總結：

JSONP是通過 script 標簽載入數據的方式去獲取數據當做 JS 代碼來執行 提前在頁面上聲明一個函數，函數名通過介面傳參的方式傳給後臺，後臺解析到函數名後在原始數據上「包裹」這個函數名，發送給前端。換句話說，JSONP 需要對應介面的後端的配合才能實現。

server.js

var http = require('http')
var fs = require('fs')
var path = require('path')
var url =  require('url')

http.createServer(function(req,res){
  var pathObj = url.parse(req.url,true)

  switch (pathObj.pathname) {
    case '/getNews':
      var news = [
        "保羅喬治釣魚競標賽圓滿結束：感謝你們所有人的參賽",
        "威斯布魯克妻子透露將自己與丈夫的第二個孩子",
        "[翻譯團]防守將會使雷霆在2018-19賽季更上一層樓"
      ]
      res.setHeader('content-Type','text/json; charset=utf-8')
      if(pathObj.query.callback){
        res.end(pathObj.query.callback + '(' + JSON.stringify(news) + ')')
      }else{
        res.end(JSON.stringify(news))
      }

      break;

    default:
      fs.readFile(path.join(__dirname,pathObj.pathname),function(e,data){
        if(e){
          res.writeHead(404,'not found')
          res.end('<h1>404 Nof Found</h1>')
        }else{
          res.end(data)
        }
      })
  }
}).listen(9004)
console.log('visit http://localhost:9004/index.html')

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>JSONP 跨域</title>
</head>
<body>
  <div class="container">
    <ul class="news">
    </ul>
    <button class="show">show news</button>
  </div>

  <script>
    function $(selector){
      return document.querySelector(selector)
    }

    $('.show').addEventListener('click',function(){
      var script = document.createElement('script')
      script.src = 'http://127.0.0.1:9004/getNews?callback=appendHtml'
      document.head.appendChild(script)  //添加script
      document.head.removeChild(script)  //移除script
    })

    function appendHtml(news){
      var html = ''
      for (var i=0; i < news.length; i++ ){
        html += '<li>' + news[i] + '</li>'
      }
      console.log(html)
      $('.news').innerHTML = html
    }
  </script>
</body>
</html>

打開終端，輸入 node server.js ，瀏覽器打開 http://localhost:9004/index.html

CORS

CORS 全稱是跨域資源共用（Cross-Origin Resource Sharing），是一種 ajax 跨域請求資源的方式，支持現代瀏覽器，IE支持10以上。 實現方式很簡單，當你使用 XMLHttpRequest 發送請求時，瀏覽器發現該請求不符合同源策略，會給該請求加一個請求頭：Origin，後臺進行一系列處理，如果確定接受請求則在返回結果中加入一個響應頭：Access-Control-Allow-Origin; 瀏覽器判斷該相應頭中是否包含 Origin 的值，如果有則瀏覽器會處理響應，我們就可以拿到響應數據，如果不包含瀏覽器直接駁回，這時我們無法拿到響應數據。所以 CORS 的表象是讓你覺得它與同源的 ajax 無區別，代碼完全一樣。

server.js

var http = require('http')
var fs = require('fs')
var path = require('path')
var url =  require('url')

http.createServer(function(req,res){
  var pathObj = url.parse(req.url,true)

  switch (pathObj.pathname) {
    case '/getNews':
      var news = [
        "保羅喬治釣魚競標賽圓滿結束：感謝你們所有人的參賽",
        "威斯布魯克妻子透露將自己與丈夫的第二個孩子",
        "[翻譯團]防守將會使雷霆在2018-19賽季更上一層樓"
      ]
      res.setHeader('Access-Control-Allow-Origin','http://localhost:9005') //CORS跨域
      res.setHeader('content-Type','text/json; charset=utf-8')
      res.end(JSON.stringify(news))

      break;

    default:
      fs.readFile(path.join(__dirname,pathObj.pathname),function(e,data){
        if(e){
          res.writeHead(404,'not found')
          res.end('<h1>404 Nof Found</h1>')
        }else{
          res.end(data)
        }
      })
  }
}).listen(9005)
console.log('visit http://localhost:9005/index.html')

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CORS 跨域</title>
</head>
<body>
  <div class="container">
    <ul class="news">
    </ul>
    <button class="show">show news</button>
  </div>

  <script>
    function $(selector){
      return document.querySelector(selector)
    }

    $('.show').addEventListener('click',function(){
      var xhr = new XMLHttpRequest()
      xhr.open('GET','http://127.0.0.1:9005/getNews',true)
      xhr.send()
      xhr.onload = function(){
        appendHtml(JSON.parse(xhr.responseText))
      }
    })

    function appendHtml(news){
      var html = ''
      for (var i=0; i < news.length; i++ ){
        html += '<li>' + news[i] + '</li>'
      }
      console.log(html)
      $('.news').innerHTML = html
    }
  </script>
</body>
</html>

啟動終端，執行 node server.js ，瀏覽器打開 http://localhost:9005/index.html ,查看效果和網路請求

參考

前端常見跨域解決方案（全）

node-server


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • vue UI 告別webpack配置
    vue-cli 3.0 的候選版本也已經發佈多時了。vue-cli 3.0 版本為我們提供了集 創建、管理、分析 為一體的可視化界面vue ui，媽媽再也不用擔心我不懂配置啦~讓我們來一起嘗嘗鮮吧~ ...
  • 鬥魚擴展--讓你看到更多內容(七)
    代碼可以在 https://pan.baidu.com/s/1uN120-18hvAzELpJCQfbXA 處下載 下麵我們一步優化頁面，在一個頁面上減少 廣告的同時，也能獲取更多的信息。 我直接上代碼了，都是可以在Console 內直接 運行的。 RoomObj.js 裡加入了 一個對象方法。兩個 ...
  • 告別webpack配置！vue UI
    vue-cli 3.0 的候選版本也已經發佈多時了。vue-cli 3.0 版本為我們提供了集 創建、管理、分析 為一體的可視化界面vue ui，媽媽再也不用擔心我不懂配置啦~讓我們來一起嘗嘗鮮吧~ ...
  • js遍曆數組
    ES5 寫法arr.forEach(function(value,index){ console.log(index+'--'+value);}) ES6 寫法for( let i of arr){ console.log(i);} ...
  • html 三列佈局（兩列自適應，一列固定寬度）
    不做過多解釋：主要是記錄一個完整的佈局樣式，實現頁面大致三列其中左右兩列是自適應寬度，中間固定寬度效果。 不多少代碼奉上： CSS樣式代碼： html代碼佈局： 最終效果展示： ...
  • jq ajax 傳遞數組 後臺php 接值處理
    //jq數組 var arr = [1,2,3]; //把數組轉換為json ajax 傳遞參數的時候不能直接傳遞數組 轉換為json 可直接傳遞 var datas = JSON.stringify(arr); // ajax $.ajax({ url:"",//傳遞地址 data:{datas: ...
  • 前言
    介紹 ExtJS作為前端最為強大的框架，功能豐富，無人能出其右，無論是界面之美，還是功能之強，ext都高居榜首。使用Ext JS的決定很簡單。我們寧願坐在Sencha的肩膀上，稱自 己高大，而不是重新發明輪子。Ext JS允許我們的團隊專註於我們的優勢 - 為商業行業提供智能解決方案。 ExtJS ...
  • js獲取文件上傳進度
    js獲取文件上傳進度： js監聽： ajax文件上傳函數： 完整代碼: ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類