[angular] Angular 5의 헤더에 CORS 요청을 추가하는 방법

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<any> {
  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 ‘은 액세스가 허용되지 않습니다.

실패 : (알 수없는 URL)에 대한 HTTP 실패 응답 : 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

내 경험상 플러그인은 HTTP에서 작동했지만 최신 httpClient에서는 작동하지 않았습니다. 또한 서버에서 CORS 응답 헤더를 구성하는 것은 실제로 옵션이 아닙니다. 그래서 proxy.conf.json프록시 서버 역할을하는 파일을 만들었습니다 .

여기에서 자세한 내용을 읽어보십시오 .

proxy.conf.json 파일:

{
  "/posts": {
    "target": "https://example.com",
    "secure": true,
    "pathRewrite": {
    "^/posts": ""
  },
    "changeOrigin": true
  }
}

같은 디렉토리 의 proxy.conf.json파일 바로 옆에 파일을 배치 했습니다 package.json.

그런 다음 package.json 파일에서 시작 명령을 수정했습니다.

"start": "ng serve --proxy-config proxy.conf.json"

내 앱 구성 요소의 HTTP 호출 :

return this._http.get('/posts/pictures?method=GetPictures')
.subscribe((returnedStuff) => {
  console.log(returnedStuff);
});

마지막으로 내 앱을 실행하려면 npm start또는ng serve --proxy-config proxy.conf.json

Question 3

fetch기능과 no-cors모드를 시도 할 수도 있습니다. Angular의 내장 http 모듈보다 구성하기가 더 쉽습니다. 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 4

당신이 나와 같고 로컬 SMS 게이트웨이 서버를 사용하고 있고 192.168.0.xx와 같은 IP에 GET 요청을하면 CORS 오류가 발생합니다.

불행히도 Angular 솔루션을 찾을 수 없었지만 이전 재생을 통해 솔루션을 얻었으며 Angular 7 8 9에 대한 업데이트 버전을 게시하고 있습니다.

import {from} from 'rxjs';

getData(): Observable<any> {
    return from(
      fetch(
        'http://xxxxx', // the url you are trying to access
        {
          headers: {
            'Content-Type': 'application/json',
          },
          method: 'GET', // GET, POST, PUT, DELETE
          mode: 'no-cors' // the most important option
        }
      ));
  }

평소처럼. 구독하세요.

Question 5

NG5의 HttpClient에 대한 헤더를 다음과 같이 만드십시오.

let httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'apikey': this.apikey,
        'appkey': this.appkey,
      }),
      params: new HttpParams().set('program_id', this.program_id)
    };

localhost URL로 API 호출을 할 수 있습니다.

헤더에있는 매개 변수를 잊지 마십시오 : params : new HttpParams (). set ( ‘program_id’, this.program_id)

Question 6

Angular 6에서 httpClient를 사용한 POST도 OPTIONS 요청을 수행했습니다.

헤더 일반 :

요청 URL : https : //hp-probook/perl-bin/muziek.pl/=/postData
요청 방법 : 옵션
상태 코드 : 200 OK
원격 주소 : 127.0.0.1 : 443
리퍼러 정책 : 다운 그레이드시 리퍼러 없음

내 Perl REST 서버는 반환 코드 200으로 OPTIONS 요청을 구현합니다.

다음 POST 요청 헤더 :

동의하기:*/*
Accept-Encoding : gzip, deflate, br
Accept-Language : nl-NL, nl; q = 0.8, en-US; q = 0.6, en; q = 0.4
액세스 제어 요청 헤더 : 콘텐츠 유형
액세스 제어 요청 방법 : POST
연결 : 연결 유지
호스트 : hp-probook
출처 : http : // localhost : 4200
참조 자 : http : // localhost : 4200 /
User-Agent : Mozilla / 5.0 (X11; Linux x86_64) AppleWebKit / 537.36 (Gecko와 같은 KHTML) Chrome / 59.0.3071.109 Safari / 537.36

Access-Control-Request-Headers : content-type에주의하십시오.

따라서 내 백엔드 펄 스크립트는 다음 헤더를 사용합니다.

 - "Access-Control-Allow-Origin"=> '*',
 - "Access-Control-Allow-Methods"=> 'GET, POST, PATCH, DELETE, PUT, OPTIONS',
 - "Access-Control-Allow-Headers"=> 'Origin, Content-Type, X-Auth-Token, content-type',

이 설정으로 GET 및 POST가 작동했습니다!

Question 7

각도 cors에서 requestoptions를 가져 오십시오

    import {RequestOptions, Request, Headers } from '@angular/http';

아래와 같이 코드에 요청 옵션을 추가하십시오.

    let requestOptions = new RequestOptions({ headers:null, withCredentials:
    true });

API 요청에서 요청 옵션 보내기

아래 코드 스 니펫-

     let requestOptions = new RequestOptions({ headers:null,
     withCredentials: true });
     return this.http.get(this.config.baseUrl +
     this.config.getDropDownListForProject, requestOptions)
     .map(res =>
     {
      if(res != null)
      {
        return res.json();
        //return true;
      }
    })
  .catch(this.handleError);
   }

모든 API 요청이 먼저 도착하는 백엔드 PHP 코드에 CORS를 추가하십시오.

이것을 시도하고 그것이 작동하는지 여부를 알려주십시오. 작동하지 않는 angular5에서 CORS를 추가 한 다음 CORS를 백엔드에 추가했으며 저에게 효과적이었습니다.

Question 8

다음은 몇 시간 동안 노력한 후에 나를 위해 일했습니다.

      $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'}
                })