MS Edge: SCRIPT5022: SCRIPT5022: SecurityError

Question

When I tried to load a png to canvas in JavaScript, I got this error code in Microsoft Edge. This error happened in Edge only!

My project works like this:

--/index.html
--/live2d.js
--/models (folder)
---> /model.json
---> /skin.png

This model.json defined the pictures needed in the model, and the live2d.js get data from model.json and make the model animate.

I just load above resources from CDN domain ( https://cdn.example.com ), to show in the index on main domain ( https://example.com ).

In FireFox and Chrome you may see a cute catoon in the left-bottom corner, but you will see nothing in Edge, and you may check it in console:

SCRIPT5022: SCRIPT5022: SecurityError

To enable image CORS in Firefox & Chrome, I've set img.crossOrigin = "Anonymous"; , following Mozilla's guidebook , and it really works for Firefox & Chrome, except Edge!

I see another question on IE10 in this site, seems pretty same as my problem on Edge, so is that mean Edge has the same CORS strategy as IE? And if possible, what should I do to make the catoon show normally on Edge (with CORS)?

I'd be very appreciate for any of your suggestion!

---

PS. You may try it here: https://u.shino.cc/stackoverflow

Step 1: Open the console

Step 2: Run commend: iLoveStackOverflow();

Do two steps in both Firefox/Chrome and Edge, you may know what i'm taking.

(Step 2 is reloading a new skin.png from a CDN domain)

---

Here's my 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，则必须从同一域加载图像...