Question

从Headless Wordpress Starter Kit开始，我要从Wordpress媒体库中获取两张图像并将它们绘制到html5 canvas元素上，我需要人们能够将其另存为图像。

由于头部的区域与背部的区域不同，因此我将收到受污染的跨域请求的错误。因此，我将crossOrigin设置为anonymous。这是我将图像绘制到画布上的代码。

徽标

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);
};

服务器/后端

我没有编辑入门工具包中提供的按主题设置的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中不工作。让我知道您是否需要其他信息。

Answer 1

你不知道。这是不可能的。两个代码库必须位于同一域中。在解决这个问题几天后，我说了这个。

如果有人（不是我）弄清楚了这个问题，我将不作任何标记。

Answer 2

好的，所以我认为有可能。我在这里的问题是..缓存。浏览器缓存了没有“ origin”头的呼叫，这基本上使服务器在没有CORS头的情况下做出响应。参见：https://stackoverflow.com/a/17570351/3391743

添加
后 <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> 并清理缓存，缓存开始按其应有的方式工作，同时显示图像并且不污染我正在将图像写入的画布。是的！

如何在无头wordpress环境中确保针对图像请求的CORS？

2 个答案: