url跨域怎么解决

Creator 2.x
#1

粘贴的图像882×283 72.1 KB
如图

2赞
#2

我是强制使用canvas，然后添加header

#3

同求，我也遇到这个问题

#4

跨域问题吐血总结：
0. 首先只有浏览器下才有跨域问题，native下是没有的。

  1. 如果是跨域请求图片的话，Canvas和WebGL都会有控制台报错，但是Canvas下能加载出图片，因此如果可以只用Cavas模式且没有其它跨域请求的话，用Canvas模式即可（忽略控制台报错。。。）。否则转2。
  2. 如果请求的资源在你自己的服务器上，那么在返回的http请求的header中加上Access-Control-Allow-Origin:*字段即可。如果是文本资源（如JSON），还可以用JSONP，但是比较麻烦，不如header方便。否则转3。
  3. 如果请求的资源不在你自己的服务器上，那么需要自己搭建一个服务器中转一下请求（下载请求的资源，输出的时候加上Access-Control-Allow-Origin:*字段）。例如简单使用PHP中转跨域图片的示例代码如下（正式使用时需要判断$_GET[‘url’]是否是合法的http地址，否则可能加载出服务器本地文件，有安全隐患）：
// CrossOrigin.php
<?php
        header('Access-Control-Allow-Origin:*');
        header('Content-type: image/png');
        if (isset($_GET['url'])) {
                echo file_get_contents($_GET['url']);
        }

这样游戏中请求http://yourdomain/CrossOrigin.php?url=http://otherdomain/someimage.png，就可以加载出图片了。

2、3两步的关键都在于服务器返回的header中需要有Access-Control-Allow-Origin: *，浏览器才不会拦截这个请求和报跨域错误。如果希望自己的中转服务只可用于某个域名的跨域请求而不是任何请求，把Access-Control-Allow-Origin:*改为Access-Control-Allow-Origin: http(s)://yourdomain(or IP):port即可（*代表允许所有），注意：协议（http与https）、域名或IP、端口号（:port默认为80）都相同才属于同一域。

14赞
#5

是我的代码有问题吗、我用了你的模拟器都不显示了
在浏览器里用网址可以打开图片

        var url = 'http://127.0.0.1/img.php?url=http://wx.qlogo.cn/mmopen/HmVQlX9WkBttyPZYDHamRX1VchOM2FxyfkPcPRNFzoy42k6Y3B74Mdb52aSWDdbibGvTx7W916mbmGWibRickJb3w/0';
        var self = this;
        cc.loader.load(url, function (err, tex) {
            cc.log('Should load a texture from external url: ' + (tex instanceof cc.Texture2D));
            var spf=new cc.SpriteFrame();
            spf.initWithTexture(tex);
            self.sprite.spriteFrame=spf;
        });
#7

补充：如果服务器使用node.js，对应代码如下：

import URL = require('url');
import Request = require('request');

    function proxyEnableHttpPipe() {
        let server = http.createServer((request, response) => {
            try {
                let requestUrlObj = URL.parse(request.url);
                if (requestUrlObj.pathname == '/getImage') {
                    let targetUrl: string = requestUrlObj.search;
                    if (!targetUrl || !targetUrl.startsWith('?url=')) {
                        response.end();
                        return;
                    }

                    targetUrl = targetUrl.substring(5);

                    response.setHeader('Access-Control-Allow-Origin', '*');
                    response.setHeader('Access-Control-Allow-Methods', 'POST, GET, OPTIONS');
                    response.setHeader('Access-Control-Allow-Headers', 'X-PINGOTHER, Content-Type');
                    response.setHeader('Access-Control-Max-Age', '86400');
                    Request(targetUrl).pipe(response);
                }
            } catch (e) {
                // 不要写log了，注意这段代码其实可能遭到流量攻击
            }
        });
        server.listen(4000);
    }

客户端代码：

// 通过URL加载图片（异步加载）
export function loadImageByURL(sprite: cc.Sprite, url: string) {
    if (!cc.sys.isNative) {
        // 浏览器跨域访问有问题，改为从自己的服务器访问之
        url = 'http://xx.xx.xx.xx:4000/getImage?url=' + url;
    }

    cc.loader['load']({ url: url, }, (err, texture) => {
        if (err) {
            console.log(err);
            return;
        }

        let sp = new cc.SpriteFrame();
        sprite.spriteFrame.setTexture(texture);
    });
}
6赞
#8

mark

#9

mark.