如何在JavaScript/Chrome中本地執行跨域請求？

我正在開發一個測試頁面，只有我自己和Google Chrome才能使用。有這樣的條件來執行跨域請求到第三方服務器（不允許這樣的請求）嗎？請求可能是GET或OPTIONS。如何在JavaScript/Chrome中本地執行跨域請求？

（我知道關於Chrome的擴展名如高級REST客戶端，它可以執行這樣的請求，但它並不能幫助我，因爲複雜的計算，應事先進行申請執行）

來源

2014-09-05 LA_

我以前沒有用過它，但是你可以不發出ajax請求並使用類似'beforeSend'的東西嗎？ – SpYk3HH 2014-09-05 12:59:26

@ SpYk3HH，不要以爲我理解你 - 在發送前怎麼能幫到你呢？ – 2014-09-05 13:01:44

你說'沒有幫助我，因爲複雜的計算應該在請求執行之前執行'我想你的問題是在提出請求之前如何執行這些請求。在這種情況下，只需使用'beforeSend'與Losbear的回答低於 – SpYk3HH 2014-09-05 13:04:14

一種選擇是完全禁用同源策略，爲Disable same origin policy in Chrome詳述。這可能會爲你帶來訣竅，但它有點不雅，因爲它關閉了整個瀏覽器實例的同源策略。

第二個選項是創建一個小的Chrome擴展，它包含您需要加載的所有文件。它將使您的文件可通過chrome-extension://...訪問，並且只有該擴展名中的文件才能免受同源策略的影響。

創建一個新的文件夾，把你的測試Web頁面中，然後創建一個manifest.json文件相同的文件夾：

/testing_extension 
    test_page_immune_from_same_origin.html 
    script_used_by_test_page.js 
    styles_for_test_page.css 
    manifest.json

的manifest.json內容應

{ 
    "name": "All-origin access extension", 
    "manifest_version": 2, 
    "version": "1.0", 
    "permissions": ["<all_urls>"] 
}

加載擴展通過chrome://extensions，啓用Developer Mode，然後選擇具有Load unpacked extension...選項的新文件夾。

您可以查看您的頁面作爲擴展資源chrome-extension://[app_id]/[file_name]，其中「app_id」是在chrome://extensions頁面上爲擴展名列出的散列。（它將是一串長長的小寫字母。）現在，當頁面執行跨源資源時，它會通過瀏覽器擴展的權限執行此操作，而不受同源策略的限制。

請注意，您需要移動任何inline scripts into separate files以符合擴展CSP要求。

來源

2014-09-05 13:14:03 apsillers

謝謝！我能否通過這種方式在線修改我的頁面（'test_page_immune_from_same_origin.html'）？即如果我需要更改某些內容，是否需要再次刪除/添加擴展名？或者，我需要刷新頁面嗎？ – 2014-09-05 13:16:39

我想你可以隨時刷新擴展頁面，只要你改變文件;除非您更改清單，否則無需重新加載擴展。如果您的文件託管在Web服務器上，則需要將其下載到本地文件系統，並且如果需要從Web服務器版本中提取任何更改，請重新下載。 – apsillers 2014-09-05 13:23:12

謝謝，它的工作原理！（我必須稍微改變頁面 - 以符合內容安全策略 - https://developer.chrome.com/extensions/contentSecurityPolicy） – 2014-09-05 13:37:37

的一種方法是，以滿足您將文件從Web服務器而不是本地文件系統中刪除。另一種方法是用一個標誌啓動瀏覽器：

chrome --disable-web-security

（從Cross-origin image load denied on a local image with THREE.js on Chrome）

更廣泛的標誌列表在這裏：http://peter.sh/experiments/chromium-command-line-switches/

來源

2014-09-05 13:02:37 Leeft

謝謝。我之前閱讀過有關此標誌的信息，但實際上並不想禁用所有標籤頁/頁面的Web安全性。 – 2014-09-05 13:18:26

我正在做類似的項目這和我不得不上傳一個簡單的html文件到我的一個prod服務器進行測試，所以我可以測試跨域功能。指向localhost的html文件，所以它只會在開發時適用於我。

jQuery代碼看起來像這樣（以防萬一它有助於）：

 $.ajax({ 
      type: "POST", 
      dataType: "json", 
      cache: false, 
      url: url, 
      data: data, 
      crossDomain: true, 
      success: function (data) { 
       ATSJBAjax = null; 
       if (callback != null) callback(data); 
      } 
     });

而且我使用C＃/ MVC，我只好一個屬性添加到補充說：「訪問 - 所有的控制器方法控制 - 允許 - 來源「的響應頭，所以Chrome會好起來的。我叫屬性「AllowCrossDomainAccess」，這ref'd下面的類：

public class AllowCrossDomainAccessAttribute : ActionFilterAttribute 
{ 
    public override void OnActionExecuting(ActionExecutingContext filterContext) 
    { 
     filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "*"); 
     base.OnActionExecuting(filterContext); 
    } 
}

來源

2014-09-05 13:03:04 Losbear

謝謝，但這與我有什麼不同 - 我應該與第三方服務器通信，所以我不能添加標頭'Access-Control-Allow-Origin'。 – 2014-09-05 13:17:45

如何在JavaScript/Chrome中本地執行跨域請求？

回答

相關問題