Как добавить, что CORS запрашивают в заголовке в Угловых 5

Question 1

Я добавил CORS в заголовке, но я все еще получаю проблему CORS в своем запросе. Что корректный путь состоит в том, чтобы добавить и обработать CORS и другие запросы в заголовках?

Вот сервисный код файла:

import { HttpClient, HttpHeaders, HttpClientModule } from '@angular/common/http';
const httpOptions = {
  headers: new HttpHeaders({ 
    'Access-Control-Allow-Origin':'*',
    'Authorization':'authkey',
    'userid':'1'
  })
};

public baseurl = 'http://localhost/XXXXXX';

userAPI(data): Observable {
  return this.http.post(this.baseurl, data, httpOptions)
    .pipe(
      tap((result) => console.log('result-->',result)),
      catchError(this.handleError('error', []))
    );
}

Ошибка:

Ответ на запрос перед полетом не передает проверку управления доступом: Никакой 'Access-Control-Allow-Origin' заголовок не присутствует на требуемом ресурсе. Источнику 'http://localhost:4200' поэтому не предоставляют доступ

отказавший: ответ отказа Http для (неизвестный URL): 0 Неизвестных Ошибок

В моем серверном коде добавил я CORS в индексном файле.

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

Question 2

Можно также попробовать эти fetch функция и no-cors режим. Я иногда нахожу легче настроить его, чем встроенный http модуль Angular. Можно щелкнуть правой кнопкой по запросам на вкладке сети инструментов Chrome Dev и скопировать их в синтаксисе выборки, который является большим.

import { from } from 'rxjs';

// ...

result = from( // wrap the fetch in a from if you need an rxjs Observable
  fetch(
    this.baseurl,
    {
      body: JSON.stringify(data)
      headers: {
        'Content-Type': 'application/json',
      },
      method: 'POST',
      mode: 'no-cors'
    }
  )
);

Question 3

Question 4

Следующее работало на меня после того, как часы попытки

      $http.post("http://localhost:8080/yourresource", parameter, {headers: 
      {'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' } }).

Однако после кода не работали, я неясен относительно того, почему, надо надеяться, кто-то может улучшить этот ответ.

          $http({   method: 'POST', url: "http://localhost:8080/yourresource", 
                    parameter, 
                    headers: {'Content-Type': 'application/json', 
                              'Access-Control-Allow-Origin': '*',
                              'Access-Control-Allow-Methods': 'POST'} 
                })

Question 5

Используя jsonp...

в приложении, называя API:

import { HttpClient } from "@angular/common/http";

this.httpClient.jsonp("http://127.0.0.1:3001/scicat/Publication", "callback")
...

В вызываемом:

import { Request, Response } from "express";

// is commonly cross a cross origin request
export let getPublication = (req: Request, res: Response) => {
  logger.debug("Get publications request.");
  const dao = MongoConnector.getInstance();
  dao
    .getPublication(req.query)
    .then(response => {
      Response.jsonp(response);
    })
    .catch(oaiError => {
      Response.status(500);
      Response.jsonp(oaiError);
    });
};

metakermit · Answer 1 · 1 November 2019 в 10:41