Online image texture load fails in WebGL: No 'Access-Control-Allow-Origin' header.....

Hello ki_ha1984.

The CORS headers should be added to the response of the image hosting server, not the WebGL hosting server.
If you do not have access to the image hosting server configuration (i.e. it is not your server but some public one, or you want to be able to load an image from an arbitrary url), cross-domain WWW request can still be performed through an intermediate proxy server, which can append necessary headers to the proxied response.

 

You may use any php or node.js proxy available on the web. However if you want to start from something simple, I have just made a small php proxy for you (assuming that your server supports php). Upload the following proxy.php to the same server where your WebGL content is hosted, let's say to your-webgl-domain/some-folder/proxy.php

Code (php):

1.  
2. <?php
3. $url = $_GET["url"];
4. if (!preg_match("~^https?://~i", $url)) {
5.   $url = "http://" . $url;
6. }
7.  
8. $request_headers = array();
9. foreach (getallheaders() as $header => $value) {
10.   $request_headers[] = $header . ": " . $value;
11. }
12.  
13. $ch = curl_init($url);
14. curl_setopt($ch, CURLOPT_HTTPHEADER, $request_headers);
15. curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
16. curl_setopt($ch, CURLOPT_HEADER, true);
17. curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
18. $response = curl_exec($ch);
19. $response_headers = explode("\r\n", substr($response, 0, curl_getinfo($ch, CURLINFO_HEADER_SIZE)));
20. $response_body = substr($response, curl_getinfo($ch, CURLINFO_HEADER_SIZE));
21. curl_close($ch);
22.  
23. $propagate_headers = array("content-type"); //add additonal headers you want to propagate to this array in lower case
24. foreach ($response_headers as $header) {
25.   if (in_array(strtolower(explode(": ", $header)[0]), $propagate_headers)) {
26.     header($header);
27.   }
28. }
29.  
30. // you only need the following headers if the proxy and WebGL are hosted on different domains
31. header("Access-Control-Allow-Credentials: true");
32. header("Access-Control-Allow-Headers: Accept, X-Access-Token, X-Application-Name, X-Request-Sent-Time");
33. header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
34. header("Access-Control-Allow-Origin: *");
35. // you can replace the "*" above with "http://your-webgl-domain" to prevent unauthorized use of your proxy
36. // in which case you should also append "Origin: http://your-webgl-domain" header to the request
37.  
38. echo $response_body;

Note: when copying php code from the snippet above make sure that your php file starts immediately with <?php without any preceding lines, spaces or character encoding markers (otherwise proxy will not work properly).

Now add the following prefix to your url:

Code (CSharp):

1. IEnumerator SetTheTexture (GameObject objt, string imageUrl) {
2.   WWW www = new WWW ("http://your-webgl-domain/some-folder/proxy.php?url=" + imageUrl);
3.   ...

Your cross-domain image request should already work now, however some security precautions might be considered. The basic rule is to use "Access-Control-Allow-Origin: *" wisely, especially for a proxy server, as it has serious security implications.

If your proxy is hosted on the same domain as your WebGL content (as described in the example above), then you should comment out the last 4 CORS headers in the php (in this case WWW request from the browser will access the same origin and therefore CORS headers are not required anyway). Otherwise one might be able to perform cross-domain requests in another direction (from an external website to other parts of your website through your proxy) which should clearly be avoided.

If for some reason you decide to host your proxy on a different domain, then specifying "Access-Control-Allow-Origin: *" will let anybody use your proxy for performing arbitrary cross-domain requests. If you want to avoid this, you can limit the use of the proxy to your WebGL domain requests by specifying

Code (php):

1. header("Access-Control-Allow-Origin: http://your-webgl-domain");

in the proxy.php, and providing the matching Origin header in the WWW request, i.e:

Code (CSharp):

1. using System.Collections.Generic;
2. ...
3. Dictionary<string, string> headers = new Dictionary<string, string>();
4. headers.Add("Origin", "http://your-webgl-domain");
5. WWW www = new WWW ("http://your-proxy-domain/some-folder/proxy.php?url=" + imageUrl, null, headers);

I hope this helps. Let me know if you need any adjustments to make it work for your specific use case.

 

Hello msrafiyenko.

The "FormatException: Input string was not in the correct format" seems to be a c# exception, so we should first determine what exactly is causing it. Does the exception occur right after the actual request? What would the WWW.bytes return? (if you need help with this you can share your server url using private message)

 

Please pay attention to the following security warning:
curl_exec and file_get_contents can be used to access server file system and resources in the local network of the hosting server. When using curl_exec or file_get_contents you should first validate that the requested resource is an internet address (i.e. starts with http:// or https://) and that the address is external to the hosting server network (i.e. not localhost, 127.0.0.1 or other ip from the internal server network etc.). Otherwise one may use something like
proxy.php?url=../../some-server-file for file_get_contents or
proxy.php?url=file:///c:/inetpub/wwwroot/some-server-file for curl_exec
to access your local server files.
Forcing http:// prefix for urls which do not specify supported protocol should do the trick, for example:

Code (php):

1.  
2. <?php
3. $url = $_GET["url"];
4. if (!preg_match("~^https?://~i", $url)) {
5.   $url = "http://" . $url;
6. }
7. ...
8. $ch = curl_init($url);
9.  

Also, the php proxy displayed above is just a light version, something that you can use for initial testing. There are a lot of open source proxies on the web, which also support POST, PUT, OPTIONS methods etc, properly handle redirections and other corner cases.