# docs /support  FAQ & Troubleshooting

# Using Paper Snapshot with local images

To capture images running on your local server with Paper Snapshot your development server must allow [cross-origin requests](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS). By default most development servers block them.

Here’s how to configure the most common development tools so you can capture images when pasted into Paper.

## Astro

Astro wraps Vite, and (since 5.14) also enforces its own host check. You need both.

`astro.config.mjs`:

```
import { defineConfig } from 'astro/config';

export default defineConfig({
  security: {
    allowedDomains: [{ hostname: 'app.paper.design' }],
  },
  vite: {
    server: {
      cors: { origin: 'https://app.paper.design' },
    },
  },
});
```

Run with `astro dev --host` if you need it reachable from other machines.

## Django

`settings.py` (with `django-cors-headers`):

```
INSTALLED_APPS = [..., "corsheaders"]
MIDDLEWARE = ["corsheaders.middleware.CorsMiddleware", ...]
CORS_ALLOWED_ORIGINS = ["https://app.paper.design"]
```

## Express

```
import express from 'express';
import cors from 'cors';

const app = express();
app.use(cors({ origin: 'https://app.paper.design' }));
```

## Fastify

```
import Fastify from 'fastify';
import cors from '@fastify/cors';

const app = Fastify();
await app.register(cors, { origin: 'https://app.paper.design' });
```

## Flask

```
from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app, origins=["https://app.paper.design"])
```

## Next.js

Next has no per-request CORS toggle — you set headers per route via `next.config.js`:

```
module.exports = {
  async headers() {
    return [\
      {\
        source: '/:path*',\
        headers: [\
          {\
            key: 'Access-Control-Allow-Origin',\
            value: 'https://app.paper.design',\
          },\
          { key: 'Access-Control-Allow-Methods', value: 'GET,OPTIONS' },\
          { key: 'Vary', value: 'Origin' },\
        ],\
      },\
    ];
  },
};
```

## Nuxt

`nuxt.config.ts`:

```
export default defineNuxtConfig({
  vite: {
    server: {
      cors: { origin: 'https://app.paper.design' },
    },
  },
  routeRules: {
    '/**': {
      headers: {
        'Access-Control-Allow-Origin': 'https://app.paper.design',
      },
    },
  },
});
```

## Rails

`Gemfile`:

```
gem "rack-cors"
```

`config/initializers/cors.rb`:

```
Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins "https://app.paper.design"
    resource "*", headers: :any, methods: [:get, :options]
  end
end
```

## Vite / Remix / SvelteKit

`vite.config.{js,ts}`:

```
import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    cors: {
      origin: 'https://app.paper.design',
    },
  },
});
```

Vite 6+ also blocks cross-origin subresource requests to `/@fs/` paths regardless of CORS. If you hit `Blocked cross-origin request to /@fs/...`, serve the asset from `public/` instead, or add a plugin that strips `Sec-Fetch-*` headers for those requests.

## Webpack

`webpack.config.js`:

```
module.exports = {
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': 'https://app.paper.design',
    },
  },
};
```