Angular2를 사용하여 외부 API에 POST 요청을하는 방법은 무엇입니까?

꾸준한 아빠

CORS를 활용하여 게시물 요청을하려고합니다. CORS 와 관련된 여러 기사 / 답변을 보았지만 어떻게 든 작동하지 못했습니다.

내가 이해하는 바와 같이, access-control-allow-origin: *이 작업을 수행하기 위해 서버 측에 설정되어야하지만 여기에있는 것은 angular-cli 프로젝트입니다.

내 프로젝트는 순전히 Angular 2.1 기반이며 백엔드 서버가 관여하지 않습니다. 올바르게 설정하는 방법에 대한 모든 제안을 높이 평가할 것입니다.

내가 얻는 정확한 오류는 다음과 같습니다.

"NetworkError: 404 Not Found - https://flowxo.com/hooks/a/rbpja7r2/?usertype=User"

콘솔에서이 경고 :

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the
remote resource at https://flowxo.com/hooks/a/rbpja7r2/?usertype=User.
(Reason: CORS header 'Access-Control-Allow-Origin' missing).

최신 정보:

POST 요청을 만드는 방법은 다음과 같습니다.

let headers = new Headers();
headers.append('Access-Control-Allow-Headers', 'Content-Type');
headers.append('Content-Type', 'application/json');
headers.append('Access-Control-Allow-Methods', 'POST, OPTIONS');
headers.append('Access-Control-Allow-Origin', '*');
return this.http.post(
    this.flowxoUrl,
    JSON.stringify(formData),
    {headers: headers}
  )
  .map((res:Response) => res.json())
  .catch((error:any) => Observable.throw(error.json().error || 'Server error')); //...errors if any
Maciej Treder

이것은 Angular가 아닌 서버 측 문제입니다.

서버는 Access-Control-Allow-Origin헤더로 응답해야합니다 .

Java (Spring) 예 :

@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class SimpleCorsFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {}

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        response.setHeader("Access-Control-Allow-Origin", "*"); //you can specify domains here * - is a wildcard, it will allow all origins to request
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with, authorization, content-type");

        if("OPTIONS".equalsIgnoreCase(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
        } else {
            filterChain.doFilter(servletRequest, servletResponse);
        }
    }

    @Override
    public void destroy() {}
}

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

curl을 사용하여 외부 API에 GET 요청을 보내는 방법은 무엇입니까?

분류에서Dev

http를 사용하여 angular2에서 put 요청을 만드는 방법은 무엇입니까?

분류에서Dev

Flutter-Dart에서 HTTP를 사용하여 POST 요청을 보내는 방법은 무엇입니까?

분류에서Dev

jquery를 사용하여 요소를 내부에서 외부로 이동하는 방법은 무엇입니까?

분류에서Dev

HttpsURLConnection을 통한 POST 요청에 X509 인증서를 사용하는 방법은 무엇입니까?

분류에서Dev

Ajax POST 요청을 사용하여 모달 값을 db에 삽입하는 방법은 무엇입니까?

분류에서Dev

Angular Factory를 사용하여 REST API에서 http get 요청을 반환하는 방법은 무엇입니까?

분류에서Dev

양식 구성 요소를 사용하여 외부 URL에 제출하는 방법은 무엇입니까?

분류에서Dev

JavaScript 출력을 PHP에 POST 요청으로 전달하는 방법은 무엇입니까? [js를 사용하여 TZ를 얻은 다음 mySQL로 보내기]

분류에서Dev

gVim을 사용하여 외부에서 변경된 버퍼를 확인하는 방법은 무엇입니까?

분류에서Dev

Node.js를 사용하여 잘못된 POST 요청을 처리하는 방법은 무엇입니까?

분류에서Dev

React Hooks와 함께 axios를 사용하여 요청을 POST하는 방법은 무엇입니까?

분류에서Dev

Restapi를 사용하여 Github 저장소에 API 요청을하는 방법은 무엇입니까?

분류에서Dev

ObjectId를 POST 요청에 전달하는 방법은 무엇입니까?

분류에서Dev

AFNetworking을 사용하여 Post 요청을 통해 서버에서 NSData를 보내는 방법은 무엇입니까?

분류에서Dev

내 PC에서 외부 IP를 사용하여 내 웹 페이지를 여는 방법은 무엇입니까?

분류에서Dev

GitHub API를 사용하여 GitHub pull 요청에서 댓글을 가져 오는 방법은 무엇입니까?

분류에서Dev

JFreeChart를 사용하여 외부 Tomcat에서 보고서를 실행하는 방법은 무엇입니까?

분류에서Dev

외부 API에 대한 GET 및 POST 요청을 만드는 방법은 무엇입니까?

분류에서Dev

Java를 사용하여 외부 페이지에 로그인하는 방법은 무엇입니까?

분류에서Dev

Dropbox API v2 POST HTTP 요청을 jQuery $ .ajax로 변환하는 방법은 무엇입니까?

분류에서Dev

Chrome 확장 프로그램에서 AJAX를 사용하여 POST 요청을 만드는 방법은 무엇입니까?

분류에서Dev

Mule Flow에서 json 페이로드를 사용하여 REST API에 POST하는 방법은 무엇입니까?

분류에서Dev

postman을 사용하여 devise로 보호되는 API를 요청하는 방법은 무엇입니까?

분류에서Dev

외부 사이트에서 NetSuite 사용자 정의 레코드로 POST하는 방법은 무엇입니까?

분류에서Dev

`ng-if`를 사용하여 요소를 표시하고 앱 외부에서 값을 동적으로 업데이트하는 방법은 무엇입니까?

분류에서Dev

JQuery를 사용하여 외부 파일에서 객체를 얻는 방법은 무엇입니까?

분류에서Dev

Python을 사용하여 GET 요청의 URL에 "input (id)"를 삽입하는 방법은 무엇입니까?

분류에서Dev

Python 요청을 사용하여 Twitter oEmbed API를 호출하는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    curl을 사용하여 외부 API에 GET 요청을 보내는 방법은 무엇입니까?

  2. 2

    http를 사용하여 angular2에서 put 요청을 만드는 방법은 무엇입니까?

  3. 3

    Flutter-Dart에서 HTTP를 사용하여 POST 요청을 보내는 방법은 무엇입니까?

  4. 4

    jquery를 사용하여 요소를 내부에서 외부로 이동하는 방법은 무엇입니까?

  5. 5

    HttpsURLConnection을 통한 POST 요청에 X509 인증서를 사용하는 방법은 무엇입니까?

  6. 6

    Ajax POST 요청을 사용하여 모달 값을 db에 삽입하는 방법은 무엇입니까?

  7. 7

    Angular Factory를 사용하여 REST API에서 http get 요청을 반환하는 방법은 무엇입니까?

  8. 8

    양식 구성 요소를 사용하여 외부 URL에 제출하는 방법은 무엇입니까?

  9. 9

    JavaScript 출력을 PHP에 POST 요청으로 전달하는 방법은 무엇입니까? [js를 사용하여 TZ를 얻은 다음 mySQL로 보내기]

  10. 10

    gVim을 사용하여 외부에서 변경된 버퍼를 확인하는 방법은 무엇입니까?

  11. 11

    Node.js를 사용하여 잘못된 POST 요청을 처리하는 방법은 무엇입니까?

  12. 12

    React Hooks와 함께 axios를 사용하여 요청을 POST하는 방법은 무엇입니까?

  13. 13

    Restapi를 사용하여 Github 저장소에 API 요청을하는 방법은 무엇입니까?

  14. 14

    ObjectId를 POST 요청에 전달하는 방법은 무엇입니까?

  15. 15

    AFNetworking을 사용하여 Post 요청을 통해 서버에서 NSData를 보내는 방법은 무엇입니까?

  16. 16

    내 PC에서 외부 IP를 사용하여 내 웹 페이지를 여는 방법은 무엇입니까?

  17. 17

    GitHub API를 사용하여 GitHub pull 요청에서 댓글을 가져 오는 방법은 무엇입니까?

  18. 18

    JFreeChart를 사용하여 외부 Tomcat에서 보고서를 실행하는 방법은 무엇입니까?

  19. 19

    외부 API에 대한 GET 및 POST 요청을 만드는 방법은 무엇입니까?

  20. 20

    Java를 사용하여 외부 페이지에 로그인하는 방법은 무엇입니까?

  21. 21

    Dropbox API v2 POST HTTP 요청을 jQuery $ .ajax로 변환하는 방법은 무엇입니까?

  22. 22

    Chrome 확장 프로그램에서 AJAX를 사용하여 POST 요청을 만드는 방법은 무엇입니까?

  23. 23

    Mule Flow에서 json 페이로드를 사용하여 REST API에 POST하는 방법은 무엇입니까?

  24. 24

    postman을 사용하여 devise로 보호되는 API를 요청하는 방법은 무엇입니까?

  25. 25

    외부 사이트에서 NetSuite 사용자 정의 레코드로 POST하는 방법은 무엇입니까?

  26. 26

    `ng-if`를 사용하여 요소를 표시하고 앱 외부에서 값을 동적으로 업데이트하는 방법은 무엇입니까?

  27. 27

    JQuery를 사용하여 외부 파일에서 객체를 얻는 방법은 무엇입니까?

  28. 28

    Python을 사용하여 GET 요청의 URL에 "input (id)"를 삽입하는 방법은 무엇입니까?

  29. 29

    Python 요청을 사용하여 Twitter oEmbed API를 호출하는 방법은 무엇입니까?

뜨겁다태그

보관