爲本地域禁用Chrome的相同原產地策略

Question

我試圖在我的Mac OS 10.10機器上使用Chrome 45.0.2454.85（64位）作爲本地擴展名的本地* .dev樣式域上的跨源請求發展。

我無法通過向testbox.dev得到一條消息，因爲每次我做下面的代碼時，我得到價值0爲status和responseText總是空的。檢查後臺頁面的視圖，顯示嘗試進行連接時的控制檯錯誤net::ERR_CONNECTION_REFUSED。

我試着關閉Chrome的所有實例，然後使用命令open -a Google\ Chrome --args --disable-web-security重新啓動，但仍然無法正常工作。

我試過CORS Chrome擴展，所以我至少可以在本地服務器上測試，但是沒有奏效。

嘗試爲我的生活加上前綴api.example.com URL與https://www.corsproxy.com/但請求永遠不會完成。

嘗試使用cors-anywhere.herokuapp.com前綴，但我找回了錯誤origin header required。爲了解決此問題，我嘗試使用xhr.setRequestHeader('Origin', http + '//' + window.location.host);發送原始標題，但Chrome不允許我繼續執行錯誤Refused to set unsafe header "Origin"。

我嘗試添加以下響應到我的服務器的Laravel控制器的方法，但並沒有幫助：

return Response::json($stock, 200, ['Access-Control-Allow-Origin' => '*']); 

manifest.json的：

{ 
    "name": "__MSG_appName__", 
    "version": "1.0.0", 
    "manifest_version": 2, 
    "description": "__MSG_appDescription__", 
    "icons": { 
     "16": "images/icon-16.png", 
     "48": "images/icon-48.png", 
     "128": "images/icon-128.png" 
    }, 
    "default_locale": "en", 
    "background": { 
     "scripts": [ 
      //"scripts/chromereload.js" 
      "scripts/background.js" 
     ], 
     "persistent": false 
    }, 
    "browser_action": { 
     "default_icon": { 
      "16": "images/icon-16.png", 
      "32": "images/icon-32.png", 
      "38": "images/icon-38.png", 
      "48": "images/icon-48.png", 
      "64": "images/icon-64.png", 
      "128": "images/icon-128.png" 
     }, 
     "default_title": "Workflow Enhancer" 
    }, 
    "options_page": "options.html", 
    "content_scripts": [ 
     { 
      "matches": [ 
       "http://www.example.com/*", 
       "https://www.example.com/*", 
       "https://*.freshbooks.com/*", 
       "https://*.highrisehq.com/*" 
      ], 
      "css": [ 
       "styles/content.css" 
      ], 
      "js": [ 
       "scripts/jquery.min.js", 
       "scripts/xhrproxy.js", 
       "scripts/content.js" 
      ], 
      "run_at": "document_end", 
      "all_frames": false 
     } 
    ], 
    "permissions": [ 
     "activeTab", 
     "<all_urls>", 
     "http://*.dev/*", 
     "https://*.dev/*", 
     "http://testbox.dev/*", 
     "https://testbox.dev/*", 
     "http://*.example.com/*", 
     "https://*.example.com/*" 
    ], 
    "web_accessible_resources": [ 
     "*" 
    ] 
} 

background.js

chrome.extension.onConnect.addListener(function(port) { 
    if (port.name != 'XHRProxy_') 
     return; 

    port.onMessage.addListener(function(xhrOptions) { 
     var http = (window.location.protocol === 'http:' ? 'http:' : 'https:'); 
     var xhr = new XMLHttpRequest(); 

     xhr.open(xhrOptions.method || "GET", http + xhrOptions.url, true); 
     //xhr.setRequestHeader('Origin', http + '//' + window.location.host); 
     xhr.setRequestHeader('X-Requested-With', 'XHRProxy'); 
     xhr.setRequestHeader('X-API-key', 'JSFLIESLIFDFDHSLFEHSLFHSFH'); 

     xhr.onreadystatechange = function() { 
      if (this.readyState == 4) { 
       port.postMessage({ 
        status : this.status, 
        data : this.responseText, 
        xhr : this 
       }); 
      } 
     }; 

     xhr.send(); 
    }); 
}); 

xhrproxy.js

var proxyXHR = {}; 

proxyXHR.get = function (url) { 
    var port  = chrome.extension.connect({ name: 'XHRProxy_' }); 
    var settings = { 
     method : 'GET', 
     url : url 
    }; 
    var onSuccess; 
    var onFailure; 
    var self = { 
     onSuccess: function (callback) { 
      onSuccess = callback; 
      return self; 
     }, 
     onFailure: function (callback) { 
      onFailure = callback; 
      return self; 
     } 
    }; 
    port.onMessage.addListener(function (msg) { 
     if (msg.status === 200 && typeof onSuccess === 'function') { 
      onSuccess(msg.data, msg.xhr); 
     } else if (typeof onFailure === 'function') { 
      onFailure(msg.data, msg.xhr); 
     } 
    }); 
    port.postMessage(settings); 
    return self; 
}; 

個

content.js

// Localhost test domain. 
proxyXHR.get('testbox.dev/api/XYZ/quantity') 
      .onSuccess(function (data) { 
       console.log(data); 
      }) 
      .onFailure(function (data, xhr) { 
       console.log("HTTP Error while retrieving data.", data, xhr.status); 
      }); 

// Production server domain....produces same error as local domain test above. 
proxyXHR.get('api.example.com/api/XYZ/quantity') 
      .onSuccess(function (data) { 
       console.log(data); 
      }) 
      .onFailure(function (data, xhr) { 
       console.log("HTTP Error while retrieving data.", data, xhr.status); 
      }); 

如果我改變從testbox.dev URL以我的生產URL api.example.com我仍然得到同樣的十字起源拒絕。

任何想法這裏有什麼錯？

Answer 1

net::ERR_CONNECTION_REFUSED不是交叉原點錯誤。您的https連接可能存在問題。您可以確保您的服務器上有適當的證書或切換到http。

注意以下行：

var http = (window.location.protocol === 'http:' ? 'http:' : 'https:'); 

沒有多大意義在後臺頁面，因爲該協議將永遠是chrome-extension:。