Wampserver XMLHttpRequest 无法加载请求的资源上不存在 'Access-Control-Allow-Origin' header
Wampserver XMLHttpRequest cannot load No 'Access-Control-Allow-Origin' header is present on the requested resource
首先,很抱歉提出一个问题,这个问题之前已经被问过很多次,但我还没有找到一个我理解或对我有用的合适答案。
我正在尝试访问我的 WAMP 盒上的另一项服务,但我一直收到错误消息:
XMLHttpRequest cannot load http://192.168.0.2:8080/json.htm?type=command¶m=switchlight&idx=9&switchcmd=Off&level=0. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.0.2' is therefore not allowed access.
我在 Windows 8.1 机器上 运行 WAMP 2.5。我尝试了各种解决方案,但作为一名卧室爱好者,我 运行 遇到了麻烦。
我已将 mod_headers 添加到 Apache 选项,我的 httpd.conf 包含:
<IfModule mod_headers.c>
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
</IfModule>
尝试添加 .htaccess 文件:
Header set Access-Control-Allow-Origin "*"
尝试使用 JSONP,但我尝试访问的服务不支持它并且 returns 语法错误:
我已经对我的代码进行了很多更改,但我目前使用的代码如下所示:
<script>
var testSwitchValue = 0;
function testSwitch() {
if (testSwitchValue > 0) {
var switchCommand = "Off";
testSwitchValue = 0;
} else {
var switchCommand = "On";
testSwitchValue = 1;
}
$.ajax({
url: 'http://192.168.0.2:8080/json.htm?type=command¶m=switchlight&idx=9&switchcmd=' + switchCommand + '&level=0',
type: 'GET',
success: function(data) {
console.log(data)
},
error: function(xhr, status, error) {
console.log(status);
}
});
}
</script>
编辑
奇怪的是,它刚刚开始在 IE 11.0 中工作,但仍然没有 Chrome 并且仅适用于 192.168.0.2 的本地地址。
好的,现在我知道你在做什么了
我有一种感觉
Header add Access-Control-Allow-Origin "*"
将无法在非标准端口上工作,即它假定端口 80 而您正在使用 http://192.168.0.2:8080
我想你可以通过添加另一行像这样来证明这一点
<IfModule mod_headers.c>
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Origin "http://192.168.0.2:8080"
Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
</IfModule>
如果它突然开始工作,那是你的问题。
好的,经过更多 Google 搜索后,我现在可以回答我自己的问题了。
我需要做的是在 Apache 中设置一个代理并将其传递给我的本地 192 地址。
显然是一个没有真正编码经验的爱好者,我不知道这是否是个坏主意(希望有人可以告诉我)但它确实有效,而且它真的只适合我自己 entertainment/use。
所以在 Apache 中我启用了:
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so
在我的 httpd.conf 我添加了:
ProxyRequests Off
ProxyPreserveHost On
<Proxy *>
Order deny,allow
Allow from all
</Proxy>
ProxyPass /homeAutomation http://192.168.0.2:8080
ProxyPassReverse /homeAutomation http://192.168.0.2:8080
<Location /EMBackend>
Order allow,deny
Allow from all
</Location>
我的 jQuery 现在看起来像:
<script>
var testSwitchValue = 0;
function testSwitch() {
if (testSwitchValue > 0) {
var switchCommand = "Off";
testSwitchValue = 0;
} else {
var switchCommand = "On";
testSwitchValue = 1;
}
$.ajax({
url: '/homeAutomation/json.htm?type=command¶m=switchlight&idx=9&switchcmd='+switchCommand+'&level=0',
type: 'GET',
success: function(data) {
console.log(data + ' ' + URL)
},
error: function(xhr, status, error) {
console.log(status);
}
});
}
</script>