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


87

헤더에 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');

3
서버 측에 Cors 헤더를 추가해야합니다.
Sachila Ranawaka

@SachilaRanawaka 예 색인 파일에 추가했습니다.
아만 쿠마

해당 서버의 파일 게시
Sachila Ranawaka


이 답변은 유용 할 수 있습니다. stackoverflow.com/a/58064366/7059557
AmirReza-Farahlagha

답변:


51

내 경험상 플러그인은 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


15
개발 목적으로 만 작동합니다. 당신은 프록시 도구를 사용하여 응용 프로그램 구축 할 수 없습니다
GVArt


targetproxy.config 파일에서 무엇을 설정해야 합니까?
A-Sharabiani

상태 확인을 표시했지만 이제 새로운 오류가 발생했습니다. HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://localhost:4200/", ok: false, …} error: SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) message: "Unexpected token < in JSON at position 0" "
Aman Gupta

8
그것이 적절한 해결책이 될 수 있도록이 생산 작업, 빌드하지 않습니다
아론 매튜스

4

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

질문의 코드 는 응답 을 읽으 려고합니다 . no-cors차단합니다. 또한 콘텐츠 유형을 application/json.
Quentin

아주 특별한 경우를 위해 api.github.com/orgs/nesign/repos , 나는 보았다 Access to XMLHttpRequest at '..' from origin '..' has been blocked by CORS policy: Request header field x-timezone is not allowed by Access-Control-Allow-Headers in preflight response.오버라이드 (override) 할 수없는 Access-Control-Request-Headers: cache-control,x-timezone:( 기본적으로 추가 취득한와 Github에서이 응답했다 Access-Control-Allow-Headers: Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, Accept-Encoding, X-GitHub-OTP, X-Requested-With, User-Agent일을 인출
아난드 Rockzz을

이런! 저에서 추가 된 X-시간대 - 내가 한 이상 설계httpclient: 인터셉터 오랜 시간이 다시와
아난드 Rockzz을

3

당신이 나와 같고 로컬 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
        }
      ));
  }

평소처럼. 구독하세요.


2

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)

2

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가 작동했습니다!


1

각도 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를 백엔드에 추가했으며 저에게 효과적이었습니다.


-6

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

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

1
$ http? Angular 5에 대해 이야기하고 있기 때문에 AngularJS입니까? 이 코드가 작동 할 수 없습니다
빅터 Jozwicki

@VictorJozwicki 맞습니다 그것은 Angular 5가 아닙니다. 내 package.json에서 그것은 각도 버전 1.7.5를 보여줍니다.
MG 개발자
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.