为本地域的 Chrome 禁用同源策略
Disabling same origin policy for Chrome for local domains
我正在尝试使用 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
。为了解决这个问题,我尝试使用 xhr.setRequestHeader('Origin', http + '//' + window.location.host);
发送来源 header 但 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);
});
如果我将 URL 从 testbox.dev
更改为我的产品 URL api.example.com
我仍然会得到相同的交叉来源拒绝。
知道这里出了什么问题吗?
net::ERR_CONNECTION_REFUSED
不是跨源错误。您的 https 连接可能有问题。您可以确保您的服务器上有正确的证书或切换到 http。
注意下面一行:
var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
在后台页面中没有多大意义,因为协议始终是 chrome-extension:
。
我正在尝试使用 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
。为了解决这个问题,我尝试使用 xhr.setRequestHeader('Origin', http + '//' + window.location.host);
发送来源 header 但 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);
});
如果我将 URL 从 testbox.dev
更改为我的产品 URL api.example.com
我仍然会得到相同的交叉来源拒绝。
知道这里出了什么问题吗?
net::ERR_CONNECTION_REFUSED
不是跨源错误。您的 https 连接可能有问题。您可以确保您的服务器上有正确的证书或切换到 http。
注意下面一行:
var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
在后台页面中没有多大意义,因为协议始终是 chrome-extension:
。