Как отключить CORS в NUXT?

В Nuxt.js по умолчанию настроена защита от перехвата браузером запросов к другим доменам (CORS - Cross-Origin Resource Sharing). Однако, в некоторых случаях вам может понадобиться отключить эту защиту.

Существует несколько способов отключения CORS в Nuxt.js, в зависимости от того, какие ресурсы вы используете в вашем проекте.

1. Для API запросов:
Если вы делаете API запросы с вашего сервера (или с локального хоста), вы можете отключить CORS следующим образом:
- Создайте файл nuxt.config.js, если его еще нет.
- Добавьте следующую настройку в файле nuxt.config.js:

     module.exports = {
       serverMiddleware: [
         { path: '/api', handler: '~/server-middleware/cors.js' }
       ]
     }

- Создайте директорию server-middleware в корне вашего проекта.
- В директории server-middleware создайте файл cors.js.
- В файле cors.js добавьте следующий код:

     export default function(req, res, next) {
       res.setHeader('Access-Control-Allow-Origin', '*');
       res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
       next();
     }

Это создаст новый серверный middleware для вашего Nuxt.js приложения, который добавит заголовки CORS к вашим API запросам. Обратите внимание, что данная настройка работает только для API запросов на ваш сервер.

2. Для запросов к статическим файлам:
Если вам нужно отключить CORS для запросов к статическим файлам, вы можете воспользоваться следующей настройкой:
- Добавьте следующую настройку в файле nuxt.config.js:

     module.exports = {
       render: {
         static: {
           setHeaders(res) {
             res.setHeader('Access-Control-Allow-Origin', '*');
             res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
           }
         }
       }
     }

Эта настройка добавит заголовки CORS к ответам сервера при запросах к статическим файлам. Обратите внимание, что данная настройка будет применяться ко всем статическим файлам в проекте.

3. Для разработки в режиме dev:
Если вы разрабатываете свое приложение в режиме разработки и хотите отключить CORS, вы можете использовать пакет http-proxy-middleware:
- Установите пакет, выполнив команду npm install http-proxy-middleware --save-dev или yarn add http-proxy-middleware --dev.
- Добавьте следующую настройку в файле nuxt.config.js:

     import proxy from 'http-proxy-middleware';
     
     export default {
       dev: process.env.NODE_ENV !== 'production',
       server: {
         middleware: [
           proxy('/api', { target: 'http://example.com', pathRewrite: {'^/api' : ''}, changeOrigin: true })
         ]
       }
     }

Эта настройка создает промежуточное ПО на сервере разработки, которое проксирует все запросы, начинающиеся с /api, к указанному вами адресу (в данном случае http://example.com). Обратите внимание, что приложение, на которое вы делаете запросы, должно иметь отключенные CORS или настроенный Access-Control-Allow-Origin.

И наконец, не забывайте, что отключение CORS может представлять угрозу безопасности вашего приложения. Будьте осторожны с тем, какие запросы разрешаете и от каких доменов.