為本地域的Chrome禁用同一來源策略

Question

我正在嘗試使用我正在開發的擴展程序Chrome 45.0.2454.85（64位）在Mac OS 10.10計算機上的本地* .dev樣式域上進行跨源請求。

我無法通過testbox.dev收到消息，因為每次執行以下代碼時， status值都為0 ， 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的錯誤origin header required 。 為了解決這個問題，我嘗試使用xhr.setRequestHeader('Origin', http + '//' + window.location.host);發送原始標頭xhr.setRequestHeader('Origin', http + '//' + window.location.host); 但Chrome不允許我繼續執行“ Refused to set unsafe header "Origin"錯誤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);
            });

如果將URL從testbox.dev更改為生產URL api.example.com我仍然會得到相同的跨源拒絕。

有什么主意在這里嗎？

Answer 1

net::ERR_CONNECTION_REFUSED不是跨源錯誤。 您的https連接可能有問題。 您可以確保服務器上具有正確的證書，也可以切換到http。

請注意以下行：

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

在后台頁面中沒有多大意義，因為該協議始終是chrome-extension: