Начиная с Безголовый стартовый набор Wordpress Я беру два изображения из библиотеки мультимедиа Wordpress и рисую их на элементе холста html5, который мне нужно, чтобы люди могли сохранять как изображения.
Так как домен головы отличается от заднего, я получу ошибку испорченных перекрестных запросов. Поэтому я установил crossOrigin на anonymous. Вот код, где я рисую изображение на холсте.
Logo
const image = new Image();
image.setAttribute("crossOrigin", "anonymous");
image.width = logo[size].width;
image.height = logo[size].height;
image.src = `${logo[size].source_url}`;
image.onload = () => {
const x = (this.width - image.width) / 2;
this._ctx.drawImage(image, x, x, image.width, image.height);
};
Фоновое изображение
const image = new Image(this.width, this.height);
image.setAttribute("crossOrigin", "anonymous");
image.src = backgroundImage[size].source_url;
image.onload = () => {
const x = image.width / 2;
this._ctx.drawImage(image, -x, 0);
};
Сервер / Backend
Я не редактировал набор CORS по теме, предоставленной в стартовом наборе.
wp-content/themes/postlight-headless-wp/inc/cors.php
remove_filter( 'rest_pre_serve_request', 'rest_send_cors_headers' );
add_filter( 'rest_pre_serve_request', function ( $value ) {
header( 'Access-Control-Allow-Origin: ' . get_frontend_origin() );
header( 'Access-Control-Allow-Methods: GET' );
header( 'Access-Control-Allow-Credentials: true' );
return $value;
});
Я подумал, что поскольку я запрашивал файлы напрямую, сервер не должен вызывать этот скрипт.
Вместо этого я настроил пару контейнеров докеров для запуска стека ламп. Вот docker-compose.yaml.
version: "2"
services:
db:
container_name: database
image: mysql:5.7
volumes:
- db_data:/var/lib/mysql
ports: # Set up ports exposed for other containers to connect to
- "3306:3306"
environment: # Set up mysql database name and password
MYSQL_ROOT_PASSWORD: **********
MYSQL_DATABASE: **********
MYSQL_USER: **********
MYSQL_PASSWORD: **********
wordpress:
build: .
container_name: wordpress
depends_on:
- db
ports:
- "4000:80"
volumes:
- ./html:/var/www/html
links:
- db
restart: always
environment:
WORDPRESS_DB_HOST: db:3306
WORDPRESS_DB_PASSWORD: **********
phpmyadmin:
image: phpmyadmin/phpmyadmin
container_name: phpmyadmin
depends_on:
- db
restart: always
ports:
- "8080:80"
environment:
- PMA_ARBITRARY=1
volumes:
db_data:
В корень html-папки я добавил файл .htaccess.
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
<FilesMatch "\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp)$">
SetEnvIf Origin ":" IS_CORS
Header set Access-Control-Allow-Origin "*" env=IS_CORS
</FilesMatch>
</IfModule>
</IfModule>
# END WordPress
Со всем этим я ожидал, что у меня не будет проблем. Но я здесь, и я все это напечатал, так что да, у меня есть проблема. Фоновые изображения работают отлично, логотипы - нет.
Chrome 70 - Нет.
Access to image at 'http://localhost:4000/wp-content/uploads/2018/10/paintWithNoBackground-1-150x150.png' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Safari 12 - Нет.
[Error] Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin.
[Error] Cannot load image http://localhost:4000/wp-content/uploads/2018/10/paintWithNoBackground-1-150x150.png due to access control checks.
[Error] Failed to load resource: Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin. (paintWithNoBackground-1-150x150.png, line 0)
Firefox 63 - Да, он работает здесь
No errors.
Во всех браузерах фоновое изображение работает просто отлично. Я не знаю, почему один будет работать, а другой нет, а затем, почему он работает в Firefox, но не в Chrome или Safari. Дайте мне знать, если вам нужна какая-либо другая информация.