Question

当我尝试在JavaScript中将png加载到画布时，我在Microsoft Edge中收到了此错误代码。此错误仅发生在Edge中！

我的项目是这样的：

- / index.html中
    - / live2d.js
    - / models（文件夹）
   ---＆GT; /model.json
   ---＆GT; /skin.png

此model.json定义了模型中所需的图片，live2d.js从model.json获取数据并使模型具有动画效果。

我只是加载来自CDN域（https://cdn.example.com）的上述资源，以显示在主域（https://example.com）的索引中。

在FireFox和Chrome中，您可能会在左下角看到一个可爱的卡通，但您在Edge中看不到任何内容，您可以在控制台中查看它：

SCRIPT5022：SCRIPT5022：SecurityError

在Firefox＆amp;中启用图像CORS Chrome，我已设置img.crossOrigin = "Anonymous";，跟随Mozilla's guidebook，它确实适用于Firefox＆amp; Chrome，Edge除外！

我在这个网站上看到another question on IE10，看起来和我在Edge上遇到的问题差不多，那么是什么意思是Edge与IE有相同的CORS策略？如果可能的话，我应该怎么做才能使得catoon在Edge（使用CORS）上正常显示？

我非常感谢你的任何建议！

<小时/> PS。您可以在此处尝试：https://u.shino.cc/stackoverflow

第1步：打开控制台

第2步：运行推荐：iLoveStackOverflow();

在Firefox / Chrome和Edge中执行两个步骤，您可能知道我在做什么。

（第2步是从CDN域重新加载skin.png）

<小时/> 这是我的Nginx conf：

server {
listen 443 ssl;
listen [::]:443;
server_name cdn.xxx.xxx;    

ssl on;

root /var/www/html;

index index.php index.html index.htm index.nginx-debian.html;

location / {
    # First attempt to serve request as file, then
    # as directory, then fall back to displaying a 404.
    try_files $uri $uri/ =404;
    #try_files $uri $uri/ /index.php$is_args$args;
    #add_header Access-Control-Allow-Origin *;

    # enables CORS
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        #
        # Custom headers and headers various browsers *should* be OK with but aren't
        #
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
        #
        # Tell client that this pre-flight info is valid for 20 days
        #
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
     }
     if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
        add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
     }
     if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
        add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
     }
}

location ~ \.php$ {
    include snippets/fastcgi-php.conf;
    fastcgi_pass unix:/run/php/php7.0-fpm.sock;
}

location ~ /\.ht {
    deny all;
}
location = /favicon.ico { log_not_found off; access_log off; }
location = /robots.txt { log_not_found off; access_log off; allow all; }
location ~* \.(gif|ico|jpeg|jpg|png|cur|otf|woff|svg|ttf|otf|js|css)$ {
    expires 7d;
    log_not_found off;
    add_header "Access-Control-Allow-Origin" "*";
}

location ~ /var/www/html/wp-config.php {
    return 404;
}
}

Answer 1

是的，经过很长一段时间我确定它的Edge不支持图像交叉原点，为了处理这个我添加一个js来检测浏览器，如果是IE / Edge，我必须从同一个域加载图像。 ..

MS Edge：SCRIPT5022：SCRIPT5022：SecurityError

1 个答案: