Как настроить CORS в Nuxt 3 для доступа к localhost с клиентской стороны?

Question

Генри

cors , nuxtjs

Как настроить CORS в Nuxt 3 для доступа к localhost с клиентской стороны?

Как настроить запрос к сервису, запущенному локально на клиентской стороне, чтобы получить данные? Попробованные варианты настройки запроса через прокси в Nuxt.js и других средствах не дали желаемого результата. Вот примеры использованных настроек, которые не сработали: <br/> <pre><code class="typescript">//nuxt.config.ts

vite: {
    server: {
      proxy: {
        '/api-proxy': {
          target: 'http://localhost:4001',
          changeOrigin: true,
          rewrite: path =&gt; path.replace(/^\/api-proxy/, '')
        }
      }
    }
}`

nitro: {
    devProxy: {
      '/api-proxy': {
        target: 'http://localhost:4001',
        changeOrigin: true
      }
    }
}`

routeRules: {
    '/api-proxy/**': {
      proxy: 'http://localhost:4001/**',
    }
  },`</code></pre>

22 апреля 2024 г. 14:00

Ответы на вопрос 1

Похожие вопросы

Answer 1

Для настройки CORS в Nuxt 3 для доступа к localhost с клиентской стороны, вам нужно создать файл nuxt.config.ts и добавить соответствующие настройки в разделе `serverMiddleware`. Вот пример:

```typescript
//nuxt.config.ts

export default defineNuxtConfig({
  serverMiddleware: [
    {
      path: '/api',
      handler: '~/server-middleware/api'
    }
  ],
  vite: {
    server: {
      port: 3000,
      host: 'localhost',
      proxy: {
        '/api': {
          target: 'http://localhost:4001',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      }
    }
  }
})
```

В этом примере мы добавили мидлварь сервера `api.ts` в папке `server-middleware`, который будет обрабатывать запросы к `/api`. Также мы настроили проксирование запросов к `http://localhost:4001` с помощью Vite.

Для отправки запросов к сервису, запущенному локально на клиентской стороне через прокси, вы можете использовать axios или fetch. Вот пример использования axios:

```typescript
// Импортируем axios
import axios from 'axios'

// Отправляем GET запрос к /api/sample
axios.get('/api/sample')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })
```

Убедитесь, что ваш сервер находится по адресу `http://localhost:4001` и слушает запросы на нужном порту. Также убедитесь, что ваши CORS настройки на сервере позволяют доступ с localhost.

Надеюсь, это поможет вам настроить запросы к локальному сервису через прокси в Nuxt 3.