CORS блокирует все запросы Angular. Как исправить?

Question

[Дмитрий Мединский]

Доброго времени суток!

Столкнулся с очень странной проблемой, на банально простые запросы браузер стал их все блокировать.
Высылаю запрос:

this.http.get('http://localhost:3000')
      .subscribe(res => console.log(res))

Получаю ошибку:
Access to XMLHttpRequest at 'localhost:3000' from origin 'localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Даже если добалю заголовок:

this.http.get('http://localhost:3000', {
      headers: {
        'Access-Control-Allow-Origin': '*'
      }
    })
      .subscribe(res => console.log(res))

Или таким образом:

this.http.get('http://localhost:3000', {
      headers: new HttpHeaders({
        'Access-Control-Allow-Origin': '*'
      })
    })
      .subscribe(res => console.log(res))

Получаю ошибку:
Access to XMLHttpRequest at 'localhost:3000' from origin 'localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Я просто не могу понять от куда она может взяться и как ее решить, ведь в других проектах все работало.

Прошу помочь с этой ересью.

Comments

[Strannyk]

Очевидно, на сервере, куда запрос шлете, настроить CORS.
Access-Control-Allow-Origin - это заголовок ответа, а не запроса. При кроссдоменном запросе, если в ответе сервера этого заголовка нет или в его значениие не "*" или ваш домен, браузер его не пропустит.

[Дмитрий Мединский]

Strannyk, На сервере просто ответ "Hello"

[Strannyk]

Дмитрий Мединский, Вот я и говорю.

[Дмитрий Мединский]

Strannyk, просто раньше делал все точно так же и не было подобных ошибок

[Дмитрий Мединский]

Дмитрий Мединский, Даже как на сервере установил заголовки нечего не происходит, даже судя по логам запрос недолетает к серверу

[Strannyk]

Дмитрий Мединский, Вам не на клиенте надо ставить заголовки, как на сервере. А на сервере поставить, как надо.

[Дмитрий Мединский]

Strannyk, Дело в том что и с браузера и с постмана все ок

[Strannyk]

Дмитрий Мединский, что значит "с браузера"?
В Постмане, естественно, все будет ок, блокировка кросдоменных запросов - чисто браузерная фишка.

[Дмитрий Мединский]

Strannyk, спасибо за ответ. Дело в том, что почему то сервер на Nestjs перестал обрабатывать запросы с сторонних домен. Или корневой модуль просто не позволяет. Спасибо, проблема решена.

Answer 1

[Владимир]

Вы шлете запрос с localhost:4200 на localhost:3000 для того, чтобы менеджить такие запросы сервер должен поддерживать CORS, очевидно у вас не поддерживает.
Очень плохо не знать матчасть
https://developer.mozilla.org/en-US/docs/Web/Secur...

Попробуйте настройть прокси у ng cli
https://juristr.com/blog/2016/11/configure-proxy-a...
https://github.com/angular/angular-cli/pull/1896
https://itnext.io/angular-cli-proxy-configuration-...

Comments

[Дмитрий Мединский]

Спасибо, сервер был написаный на Nest и раньше он не запрещал делать запроссы с других имен, или возможно, я просто не делал раньше роуты в корневом модуле, а он не пускает запросы с других домен. Проблемма решена, спасибо за ответ.

Answer 2

[Mikka]

У Вас не поддерживается cors настороне сервера. Судя по порту 3000 могу предположить, что Вы используете Express (nodeJS) + Angular

Если я прав то Вам необходимо добавить импорт
const cors = require('cors')
Затем установить корс - npm install

Затем в сами запросы API добавить
res.statusCode = 200;
res.setHeader('Content-Type', "application/json"); //В моем случае я получаю json
res.setHeader('Access-Control-Allow-Origin', "*"); //Либо конкретный хост (поддерживается группа в виде массива)
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); //Необходимые типы запросов
res.setHeader('Access-Control-Allow-Credentials', true); //Означает, что должен быть получен ответ
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

В конце перед указанием порта добавьте использование корс, чтобы вышло
app.use(cors())
app.listen(3000)