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&param=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&param=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&param=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>