Wampserver XMLHttpRequest 无法加载请求的资源上不存在“Access-Control-Allow-Origin”标头

Question

首先，很抱歉问了一个以前被问过很多次的问题，但我没有找到一个我理解或适合我的合适答案。

我正在尝试访问我的 WAMP 盒子上的另一个服务，但我不断收到错误消息：

XMLHttpRequest 无法加载 http://192.168.0.2:8080/json.htm?type=command&param=switchlight&idx=9&switchcmd=Off&level=0。 请求中不存在“Access-Control-Allow-Origin”标头 资源。 Origin 'http://192.168.0.2' 因此不允许访问。

我在 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，但我尝试访问的服务不支持它并返回语法错误：

我已经更改了很多代码，但我目前使用的代码如下：

<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。

Answer 1

好的，经过更多的 Google 搜索后，我现在可以回答我自己的问题了。

我需要做的是在 Apache 中设置一个代理并将我的本地 192 地址传递给它。

显然是一个没有真正编码经验的业余爱好者，我不知道这是否是一个坏主意（希望有人可以告诉我），但它确实有效，而且它真的只是为了我自己的娱乐/使用。

所以在 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>

Answer 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>

如果它突然开始工作，那就是你的问题。