자바 스크립트에서 PNG를 캔버스에로드하려고하면 Microsoft Edge에서이 오류 코드가 나타납니다. 이 오류는 Edge에서만 발생했습니다!MS Edge : SCRIPT5022 : SCRIPT5022 : SecurityError
내 프로젝트는 다음과 같이 작동
-/index.html을
-/live2d.js
-/모델 (폴더)
---> /model.jsonmodel.json및 mA에서 --->
모델에 필요한 사진을 정의이 model.json하고 live2d.js /skin.png
주 도메인 (https://example.com)의 색인에 표시하기 위해 CDN 도메인 (https://cdn.example.com)의 리소스를로드합니다.
파이어 폭스와 크롬 당신에는 왼쪽 하단 모서리에 귀여운 catoon를 볼 수 있습니다,하지만 당신은 가장자리에 아무것도 표시되지 않습니다, 당신은 콘솔에서이를 확인할 수 있습니다
SCRIPT5022 : SCRIPT5022 : 오류 SecurityError
파이어 폭스 & 크롬에서 이미지 CORS를 사용하려면
는, 나는 Mozilla's guidebook 다음, img.crossOrigin = "Anonymous"; 설정 한, 그것은 정말 가장자리를 제외하고, 파이어 폭스 & 크롬 작동!
나는이 사이트에서 another question on IE10을 본다. Edge에서 내 문제와 매우 흡사하다. 그래서 Edge는 IE와 같은 CORS 전략을 갖고있다? 그리고 가능하다면, (Cors와 함께) Edge에서 캐툰을 정상적으로 보이게하려면 어떻게해야합니까?
나는 당신의 제안에 대해 매우 감사 할 것입니다!
PS. 당신은 여기를 시도 할 수 있습니다 : https://u.shino.cc/stackoverflow
1 단계 : 콘솔을 열고
2 단계 : 실행 표창 : iLoveStackOverflow();
모두 파이어 폭스/크롬과 가장자리에서 두 단계를 수행합니다, 당신은 내가 해요 알 수있다 취득.
(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;
}
}