Unity3d + WebGL = 跨域请求被阻止

Question

我想知道如何让REST API在Unity3D项目构建为WebGL平台时运行。我今天开始更改我的项目，希望可以使用REST来解决Parse在线程中使用WebGL构建的问题。但是我遇到了CORS问题，并且不熟悉这个问题，不知道应该如何解决。

目前，我使用WWW类从Unity内部发送请求。

用户登录的示例可能是：

        WWWForm form = new WWWForm();

        var headers = form.headers;
        headers["Method"] = "GET";
        headers["X-Parse-Application-Id"] = AppID;
        headers["X-Parse-REST-API-Key"] = RestID;
        headers["X-Parse-Revocable-Session"] = "1";
        headers["Content-Type"] = "application/json";

        WWW www = new WWW("https://api.parse.com/1/login?username="+name+"&password="+password, null, headers);

在编辑器中这个功能很好，但是构建成WEBGL后并上传到我的Parse主机之后发生了以下情况...

我在FireFox浏览器中收到以下错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.parse.com/1/login?username=jleslie5159&password=Osulator5159!. This can be fixed by moving the resource to the same domain or enabling CORS.

在谷歌浏览器中也有类似的功能...

- Jeremiah Leslie

---

你可以尝试的另一件事是指定编码。 - Radio

例如 headers["Content-Type"] = "application/json; charset=utf-8"。 - Radio

我也在那里寻找答案。我在 Parse 的网站上发现他们为 JavaScript SDK 设置了 CORS……也许它没有配置以与 REST API 协同工作。但我在 Google Group 上找到了一篇开发人员的帖子，说他们已经使其工作了，但没有解释，所以我不确定。 - Jeremiah Leslie

是的，我已经没有更多信息了。我的下一个建议是切换到像PHP这样的东西，并在服务器端设置自己的域通信来解析parse.com。:( 很抱歉我没有更多帮助。 - Radio

我对于网页开发本身并不是很了解，但是如果你只是放置一个没有Unity插件的空白页面，并尝试使用JavaScript启动此请求，那么你不会得到相同的错误吗？ - Max Yankov

Answer 1

如果有其他人也遇到了类似问题，我是这样解决的：

WWWForm form = new WWWForm();
        var headers = form.headers;
        headers["X-Parse-Application-Id"] = "AppId";
        headers["X-Parse-REST-API-Key"] = "RestKey";
        headers["Content-Type"] = "application/json";
        WWW www = new WWW("https://api.parse.com/1/login?username="+name+"&password="+password, null, headers);
        while(!www.isDone)
            yield return 1;

问题源于设置 "headers["Method"] = "GET""。显然只允许发送特定的标头，否则会触发CORS违规。我通过在浏览器控制台中阅读响应来解决了这个问题，该响应指出了请求被阻止的原因。并且删除了有问题的标头。

- Jeremiah Leslie

Answer 2

我通过在服务器响应中添加头部 Access-Control-Allow-Origin:* 解决了问题。

nginx.conf

location / {
  server_name example.xyz;
  listen 8080;
  
...
...
  
  # Enable CORS
  add_header 'Access-Control-Allow-Origin' '*' always;

...
...

}

关于解释，您可以从此链接中了解到： https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

希望这能帮到您 :)

- Ar Aui

---

链接已经失效，请问能否更新一下链接或者更详细地解释一下如何操作？我遇到了同样的问题。 - The Oddler

@TheOddler 抱歉，我不是上面链接的所有者。但我找到了这个链接，它使用相同的思路。 最好在服务器配置中设置，如链接 或在NodeJS中尝试这个response.writeHead(200, {'Access-Control-Allow-Origin': '*'}); - Ar Aui

我不明白为什么你不直接给出解决方案？如果你已经找到了答案，为什么要把我们发送到其他链接？ - loekTheDreamer

@loekTheDreamer 感谢您的评论。我同意您的观点，并将示例添加到答案中。 - Ar Aui