Angular 5 API вызовов с CORS

Здравствуйте, я создаю приложение Angular, которое мне нужно для вызова API. Я столкнулся с ошибкой CORS. "No Access-Control-Allow-Origin", о котором я нашел в сети несколько вещей, но я все еще не понимаю, куда я должен добавить middlewhere. Интересно, может ли кто-нибудь конкретно рассказать, как заставить это работать с angular cli.

Если вы откроете командную строку и наберете ng new test, затем откройте эту тестовую папку и введите npm start. вы добавляете код для вызова API, скажем, localhost/someapi/api/people, но поскольку вы не вызываете localhost:4200, вы получаете эту ошибку.

Итак, чтобы мой вопрос был ясен, я понимаю, что вам нужно добавить середину cors на сервере. Но вопрос в том, где в приложении angular 5 я могу добавить это, чтобы узел прочитал его и позволил этому работать?

Ниже приведен код, который я использую для вызова api.

getToken():void{
    let headers = new Headers({'Content-type': 'application/x-www-form-urlencoded'})

    let params = new URLSearchParams();
    params.append('username','some-username');
    params.append('password', 'some-encripted-password');
    params.append('grant_type', 'password');

    let options =  new RequestOptions();
    options.headers = headers;

    this.http
        .post(this.appConfig.baseRoute + 'token',params.toString(), options) 
        .subscribe(result=>{ });
  }

вы можете добавить свой серверный код? где вы создаете сервер с express или как там?

Muhammad Usman 09.05.2018 21:14

Вы имеете в виду API, который я вызываю, или приложение angular?

3xGuy 09.05.2018 21:14

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

Muhammad Usman 09.05.2018 21:16

Я добавил код для вызова, чтобы получить токен

3xGuy 09.05.2018 21:19
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
4
501
1

Ответы 1

Заголовки CORS должны быть установлены на стороне сервера в соответствии с ответом в предоставленной вами ссылке. На стороне клиента Angular не должно быть ничего, кроме токенов аутентификации, если они требуются вашему серверу.

Чтобы упростить локальную разработку, вы можете настроить прокси для ng serve.

Добавьте этот файл в свой корень (папку с angular-cli.json)

proxy.conf.js

const PROXY_CONFIG = [
  {
      context: [
          // what routes to proxy
          "/api",
      ],
      // your backend api server
      target: "http://localhost:8000",
      secure: false
  }
]

module.exports = PROXY_CONFIG;

вместо вызова ng serve используйте ng serve --proxy-config proxy.conf.js

Другие вопросы по теме