2

각도 2를 사용하여 API (레일스) 요청을합니다. 각도로 http 요청을하면 다음 오류가 발생합니다. XMLHttpRequest는 https://api-url을로드 할 수 없습니다. 프리 플라이트 요청에 대한 응답이 액세스 제어 검사를 통과하지 못합니다. 'Access-Control-Allow-Origin'헤더가 요청 된 자원에 없습니다. 따라서 원점 'http://localhost:4200'은 액세스 할 수 없습니다. 응답에는 HTTP 상태 코드 404가 있습니다. 그러나 Postman 또는 브라우저 자체를 통해 요청을 시도하면 오류가 발생하지 않습니다. 내가 보석 'jsonapi-resources'to 개방 AP를 사용하여 내 레일 서버에서레일에 각도 요청이있을 때 Access-Control-Allow-Origin의 오류

makeRequest() { 
    let user = {"user": "user", "password": "password"}; 
    let headers: Headers = new Headers(); 
    headers.append('Authorization', 'Basic ' + btoa(user.user + ':'+user.password)); 
    headers.append('Content-Type', 'application/vn.api+json') 
    let this.http.get(api-url, {headers: headers}).map(res => res.json()).subscribe(data => { 
    this.data = data; 
    }) 
} 

: 데이터는 일반적으로 각 코드가 표시됩니다. 내 API를 컨트롤러에서 내가 요청에 헤더를 인증하고 설정하려면이 코드를 가지고 : 내가 브라우저 또는 postaman을 사용하여 요청을 할 때

module Api 
    class ApiController < JSONAPI::ResourceController 
    prepend_before_action :set_headers, :authenticate 

    def context 
     { current_station: @user } 
    end 

    private 

    def authenticate 
     authenticate_or_request_with_http_basic do |token, _| 
     @user = User.where(api_key: token).first 
     end 
    end 

    def set_headers 
     response.headers["Access-Control-Allow-Origin"] = "*" 
    end 
    end 
end 

을, 헤더는 일반적으로 나타나지만 각도에서 난 오류가 있습니다.

답변

2

이것은 CORS입니다. 간단히 말하자면 브라우저는 기본적으로 AJAX 요청을 다른 도메인 (AYAX 요청)을 만들기 위해 하나의 도메인 (http://localhost:4200)으로 금지합니다 (http://api-url). 이 확장 기능이기 때문에 "우편 배달부"에서 작동하지만 CORS는 적용되지 않습니다. 이 문제를 해결하려면 클라이언트에 CORS 연결을 허용하는 특정 헤더를 반환하도록 서버를 구성해야합니다.

사실, 웹 사이트가 AJAX 요청을 다른 도메인에 만들려고 할 때 먼저 허용 도메인이 무엇인지 묻는 OPTION 요청을 보냅니다. 이 목록은 헤더 Access-Control-Allow-Origin을 통해 서버에 의해 반환됩니다. 예를 들어, 누군가가이 서버에 AJAX 호출을 할 수 있음을 나타 내기 위해 별표 ("*")를 포함 할 수 있습니다. 이 헤더로 클라이언트가 AJAX 호출을 할 수 있다면 실제 요청이 실행되고, 그렇지 않으면 오류가 발생합니다 (아마도 현재 얻은 것일 것입니다)