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

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

머리글에 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');

제 경험상 플러그인은 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파일이 같은 디렉토리에 있습니다.

그런 다음 패키지에서 start 명령어를 수정했습니다.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

사용해 볼 수도 있습니다.fetch기능 및no-cors모드. 가끔 Angular의 내장 http 모듈보다 구성이 더 쉽다는 것을 알게 됩니다.Chrome Dev Tools 네트워크 탭에서 요청을 마우스 오른쪽 버튼으로 클릭하고 fetch 구문으로 복사할 수 있어 좋습니다.

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

만약 당신이 나처럼 로컬 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
        }
      ));
  }

그냥 평소처럼 구독하세요.

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 call을 할 수 있을 것입니다, 그것은 저에게 효과가 있습니다.

• 헤더에 params:newHttpParams().set('program_id', this.program_id)과 같은 params 열 d를 잊지 마십시오.

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, defl수락 언어:nl-NL,nl;q=0.8,en-US;q=0.6,en;q=0.4
액세스 제어-요청-헤더:내용 유형액세스-제어-요청-방법:포스트.연결:킵얼라이브호스트: hp-probook
출발지:http://localhost:4200참조자:http://localhost:4200/사용자 에이전트: Mozilla/5.0 (X11; Linux x86_64) Apple WebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.109 Safari/537.36

통지 액세스-제어-요청-헤더:내용 유형.

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

-"액세스-컨트롤-원산지 허용" => '*',-"액세스-컨트롤-허용-메소드" => 'GET, POST, PATCH, DELETE, PUT, OPTIONS',-"Access-Control-Allow-Headers" => '오리진, 내용 유형, X-Auth-Token, 내용 유형',

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

각진 코르스에서 요청 옵션을 가져오십시오.

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

아래와 같이 코드에 요청 옵션을 추가합니다.

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

api 요청의 send request 옵션

아래 코드 스니펫

 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를 추가합니다.

이것을 시도해보고 작동하는지 아닌지 알려주세요. 저는 작동하지 않는 각 5에서 CORS를 추가하고 있었는데 백엔드에 CORS를 추가했고 그것은 저에게 효과가 있었습니다.

API 파일에 이 설명을 추가합니다.

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Authorization");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE, PATCH");

프로젝트에 Laravel에 대한 CORS 헤더 응답을 추가하기 위해 다음 솔루션을 구현하려고 했지만 여전히 성공하지 못했습니다.

https://github.com/barryvdh/laravel-cors

https://github.com/spatie/laravel-cors

저는 누군가가 비슷한 문제를 겪고 도움을 줄 수 있기를 바랍니다.

몇 시간 동안 노력한 결과 다음과 같은 것들이 저에게 효과가 있었습니다.

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

언급URL : https://stackoverflow.com/questions/47345282/how-to-add-cors-request-in-header-in-angular-5