Угловой запрос CORS заблокирован

Question

Я пытаюсь подключить мое приложение Angular к простому серверу REST на экспресс. Сервер только отправляет json данные в ответ на запрос. Чтобы добавить поддержку CORS, я использовал модуль cors из npm. В приложении Angular я добавил HttpHeaders, следуя инструкциям из этого вопроса: Угловой запрос CORS заблокирован .

Вот мой код в экспрессе, где я настраивал параметры cors: `

// async CORS setup delegation
function corsOptsDelegator(req, cb) {
    let opts = {},
        origin = req.header('Origin');
    if(imports.allowedOrigins.indexOf(origin) === 1) opts.origin = true;
    else opts.origin = false;
    opts.optionsSuccessStatus = 200;
    opts.methods = ['POST', 'GET']; // allowed methods
    opts.credentials = true; // for passing/setting cookie 
    opts.allowedHeaders = ['Content-Type', 'Accept', 'Access-Control-Allow-Origin']; // restrict headers 
    opts.exposedHeaders = ['Accept', 'Content-Type']; // for exposing custom headers to clients; use for hash
    cb(null, opts);
}
`

Вот как я добавил его в глобальный обработчик get:

`
app.get('/', cors(corsOptsDelegator), (res, req, nxt) => {
    // only for adding cors on all requests
    nxt();
});
`

Вот как я настроил службу Angular:

`

export class ContentGetterService {

  private root: string;
  private corsHeaders: HttpHeaders;
  //private contents: string;

  constructor(private http: HttpClient) {
    this.root = 'http://localhost:8888';
    this.corsHeaders = new HttpHeaders({
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'Access-Control-Allow-Origin': 'http://localhost:4200'
    });
    //this.contents = '';
   }

  getContent(subs: Array<string>): Observable<IContent> {
    return (() => {
      return this.http.get<IContent>( (() => {
        let r = this.root;
        subs.forEach((s, i, a) => {
          if(i === a.length-1) {
            r += s;
          }
          else {
            if(s !== '/') {
              r += s;
            }
          }
        });
        return r;
      })(), {
        headers: this.corsHeaders
      });

    })();
  }
  }

Предупреждение браузера: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8888/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Спасибо.

Answer 1

В среде разработки (localhost) вы можете легко это сделать, не выполняя ни одного из этих трудных шагов. Вы можете просто загрузить https://addons.mozilla.org/firefox/addon/cors-everywhere/, если вы используете Firefox, и я думаю, что должно быть расширение и для Chrome. После загрузки он попадет в меню Firefox, а затем вы можете щелкнуть по нему, чтобы активировать его, вот и все, что вы теперь можете получить доступ ко всем apis, так как он автоматически отправляет заголовок со всеми запросами. Для производственной среды вы должны настроить его со своего сервера, добавив контроль доступа-разрешения-происхождения * (все)

Answer 2

Во-первых, проблема на клиенте была из-за поведения Firefox, настроенного на обработку предполетных CORS. Вместо использования метода GET был использован метод OPTIONS. Как видно из моего кода, у меня нет обработчика для обработки OPTIONS. После некоторого поиска в Google я наткнулся на этот пост на github: Express CORS middleware . Используя это и внеся следующие изменения в мои заголовки клиентских запросов, я смог правильно его запустить и запустить. Вот код:

CORS Middleware:

function myCors(req, res, nxt) {
    res.header('Access-Control-Allow-Origin', 'http://localhost:4200');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Access-Control-Allow-Origin, Content-Type, Accept, Accept-Language, Origin, User-Agent');
    if(req.method === 'OPTIONS') {
        res.sendStatus(204);
    }
    else {
        nxt();
    }
}`

Монтирование его в экземпляр приложения: app.use(myCors);

На стороне клиента Angular:

this.corsHeaders = new HttpHeaders({
  'Content-Type': 'application/json',
  'Accept': 'application/json',
  'Access-Control-Allow-Origin': 'http://localhost:8888/'
});
// ... adding it to the request
getContent(subs: Array<string>): Observable<IContent> {
return (() => {
  return this.http.get<IContent>( (() => {
    let r = this.root;
    subs.forEach((s, i, a) => {
      if(i === a.length-1) {
        r += s;
      }
      else {
        if(s !== '/') {
          r += s;
        }
      }
    });
    return r;
  })(), {
    headers: this.corsHeaders
  });

})();
}

Спасибо всем за потраченное время и усилия.

Answer 3

Разрешить серверную часть, на которую вы нажали angular JS, в этом случае вам нужно разрешить http://localhost:8888/, потому что это URL-адрес вашей серверной стороны, угловой запуск на http://localhost:4200. пожалуйста, проверьте Http. тогда это работает

Answer 4

Используйте этот код и управляйте собой в соответствии со своей структурой.

app.use(cors({ origin: http://localhost:4200, methods: 'GET,HEAD,PUT,PATCH,POST,DELETE', allowedHeaders: ['Content-Type', 'Authorization', 'Origin', 'x-access-token', 'XSRF-TOKEN'], preflightContinue: false }));

app.get('/', (res, req, nxt) => { // only for adding cors on all requests nxt(); });

На угловой стороне

constructor(private http: HttpClient) { this.root = 'http://localhost:8888'; //remove this.corsHeaders = new HttpHeaders({ 'Content-Type': 'application/json', 'Accept': 'application/json', 'Access-Control-Allow-Origin': '/' . // edit }); //this.contents = ''; }

и используйте <base> index.html

Answer 5

Если вы используете angular-cli, вы можете использовать прокси:

{
  "/api": {
    "target": "http://localhost:8888",
    "secure": false
  }
}

Перенаправит все запросы с префиксом /api на localhost: 8888 без каких-либо проблем cors.

Официальные документы: https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md