# Why does the editor throw a CORS error when processing an image?

The most likely cause of CORS errors is an incorrectly configured CORS policy on a remote server. A resource is deemed remote when it has a different _domain_, _subdomain_, _protocol_, or _port_ as the local server.

Some examples of cross-origin requests:

```bash
https://my-site.com -> https://your-site.com
https://my-site.com -> https://sub.my-site.com
https://my-site.com -> http://my-site.com
https://my-site.com -> http://my-site.com:1234
```

We can determine if the CORS policy is configured incorrectly by looking at the network tab of our browser developer tools and inspecting the request. If the `Access-Control` response headers are turned CORS is configured.

Below we can see the request information when loading a [test image](https://pqina.nl/pintura/test/cors/test.jpeg) from the Pintura Labs webserver:

```bash
Request Headers
  Url: https://pqina.nl/pintura/test/cors/test.jpeg
  Method: GET

Response Headers
  Access-Control-Allow-Methods: GET
  Access-Control-Allow-Origin: *
  Content-Type: image/jpeg
```

A wildcard means that the file can be accessed from everywhere, it's best to [set a specific origin](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin#examples).

```bash
Access-Control-Allow-Origin: https://my-site.com
```

If a specific origin is set (so no wildcard), we need to make sure the image is correctly cached as well. To do this we need to set the `Vary` header to `Origin`, see [CORS and caching](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin#CORS%5Fand%5Fcaching) on MDN.

If for some reason the remote CORS policy can't be changed we can proxy the image request through the local server. In that situation we send the URL of the remote image to our local server, our local server then requests the remote image and returns the result to the front-end.

Additional information on setting a CORS policy:

### HTML Canvas and CORS

[About Canvas and CORS on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS%5Fenabled%5Fimage)

### Google Cloud and CORS

[Google Cloud CORS](https://cloud.google.com/storage/docs/cross-origin)

### Amazon AWS S3 and CORS

* [S3 CORS](https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html)
* [Solving S3 CORS errors](https://stackoverflow.com/a/44866772/1774081).

An S3 bucket doesn't automatically send the `Vary: Origin` header, the `Origin` header needs to be present in the request for S3 to add it to `Vary`.

### Azure and CORS

[Azure CORS](https://docs.microsoft.com/en-us/rest/api/storageservices/cross-origin-resource-sharing--cors--support-for-the-azure-storage-services)

### Cloudflare R2 and CORS

First we need to [add a CORS policy](https://developers.cloudflare.com/r2/buckets/cors/#add-cors-policies-from-the-dashboard)

```json
[
    {
        "AllowedOrigins": ["*"],
        "AllowedMethods": ["GET", "HEAD"]
    }
]
```

Next up we need to [add a response header rule](https://developers.cloudflare.com/rules/transform/response-header-modification/create-dashboard/)

We add a static response header to image requests. We set name to `Vary` and value to `Access-Control-Request-Headers, Access-Control-Request-Method, Origin`.