JavaScript 코드에서 Postman에 "요청 된 자원에 'Access-Control-Allow-Origin'헤더가 없습니다"오류가 표시되지 않는 이유

javascript jquery cors same-origin-policy flask-restless


Mod note :이 질문은 Postman이 XMLHttpRequest와 같은 방식으로 CORS 제한을받지 않는 이유에 관한 것입니다. 이 질문은 "No 'Access-Control-Allow-Origin'..."오류를 해결하는 방법이 아닙니다 .

게시를 중지하십시오 :


RESTful API 내장 Flask 에 연결하여 JavaScript 를 사용하여 권한 부여를 시도하고 있습니다. 그러나 요청하면 다음 오류가 발생합니다.

XMLHttpRequest가 http : // myApiUrl / login을 로드 할 수 없습니다. 요청 된 리소스에 'Access-Control-Allow-Origin'헤더가 없습니다. 따라서 원점 '널'은 액세스가 허용되지 않습니다.

API 또는 원격 리소스가 헤더를 설정해야한다는 것을 알고 있지만 Chrome 확장 프로그램 Postman을 통해 요청했을 때 왜 작동 했습니까?

이것은 요청 코드입니다.

$.ajax({
    type: "POST",
    dataType: 'text',
    url: api,
    username: 'user',
    password: 'pass',
    crossDomain : true,
    xhrFields: {
        withCredentials: true
    }
})
    .done(function( data ) {
        console.log("done");
    })
    .fail( function(xhr, textStatus, errorThrown) {
        alert(xhr.responseText);
        alert(textStatus);
    });




Answer 1 MD. Sahib Bin Mahboob


내가 올바르게 이해하면 귀하의 페이지가 아닌 다른 도메인에 XMLHttpRequest 를하고 있습니다. 따라서 브라우저는 일반적으로 보안상의 이유로 동일한 출처에서 요청을 허용하므로 브라우저를 차단합니다. 도메인 간 요청을 수행하려는 경우 다른 작업을 수행해야합니다. 이를 달성하는 방법에 대한 자습서는 Using CORS 입니다.

우편 배달부를 사용하는 경우이 정책에 의해 제한되지 않습니다. Cross-Origin XMLHttpRequest 에서 인용 :

일반 웹 페이지는 XMLHttpRequest 객체를 사용하여 원격 서버와 데이터를주고받을 수 있지만 동일한 원본 정책에 의해 제한됩니다. 확장은 그렇게 제한되지 않습니다. 교차 출처 권한을 먼저 요청하는 한 확장은 원래 외부의 원격 서버와 통신 할 수 있습니다.




Answer 2 Shady Sherif


경고 : Access-Control-Allow-Origin: * 사용하면 API / 웹 사이트가 CSRF ( Cross-Site Request Forgery) 공격에 취약해질 수 있습니다. 이 코드를 사용하기 전에 위험 을 이해 했는지 확인하십시오.

PHP를 사용하는 경우 해결하는 것이 매우 간단합니다. 요청을 처리하는 PHP 페이지의 시작 부분에 다음 스크립트를 추가하십시오.

<?php header('Access-Control-Allow-Origin: *'); ?>

Node-red 를 사용하는 경우 다음 행의 주석을 해제하여 node-red/settings.js 파일에서 CORS 를 허용해야합니다.

// The following property can be used to configure cross-origin resource sharing
// in the HTTP nodes.
// See https://github.com/troygoode/node-cors#configuration-options for
// details on its contents. The following is a basic permissive set of options:
httpNodeCors: {
 origin: "*",
 methods: "GET,PUT,POST,DELETE"
},

Flask 를 사용하는 경우 질문과 동일합니다. 먼저 flask-cors 를 설치해야합니다

$ pip install -U flask-cors

그런 다음 응용 프로그램에 Flask cors를 포함하십시오.

from flask_cors import CORS

간단한 응용 프로그램은 다음과 같습니다.

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/")
def helloWorld():
  return "Hello, cross-origin-world!"

자세한 내용은 Flask 설명서를 확인할 수 있습니다.




Answer 3 George Livingston


Because
$ .ajax ({type : "POST" - 옵션 호출
$ .post (-POST 호출

둘 다 다릅니다. 우편 배달부에서는 "POST"를 올바르게 호출하지만 전화를 걸면 "OPTIONS"가됩니다.

C # 웹 서비스의 경우- 웹 API

<system.webServer> 태그 아래 web.config 파일에 다음 코드를 추가하십시오. 이것은 작동합니다 :

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
    </customHeaders>
</httpProtocol>

Ajax 호출에서 실수하지 않도록하십시오

jQuery

$.ajax({
    url: 'http://mysite.microsoft.sample.xyz.com/api/mycall',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    type: "POST", /* or type:"GET" or type:"PUT" */
    dataType: "json",
    data: {
    },
    success: function (result) {
        console.log(result);
    },
    error: function () {
        console.log("error");
    }
});

Angular 4 문제-http://www.hubfly.com/blog/solutions/how-to-fix-angular-4-api-call-issues/를 참조 하십시오

참고 : 타사 웹 사이트에서 콘텐츠를 다운로드하려는 경우 도움이되지 않습니다 . 다음 코드는 시도 할 수 있지만 JavaScript는 시도 할 수 없습니다.

System.Net.WebClient wc = new System.Net.WebClient();
string str = wc.DownloadString("http://mysite.microsoft.sample.xyz.com/api/mycall");



Answer 4 Gopinath


CORS 제한을 적용하는 것은 서버에 의해 정의되고 브라우저에 의해 구현되는 보안 기능입니다.

브라우저는 서버의 CORS 정책을보고 존중합니다.

그러나 Postman 도구는 서버의 CORS 정책을 신경 쓰지 않습니다.

이것이 CORS 오류가 브라우저에 나타나지만 Postman에는 나타나지 않는 이유입니다.




Answer 5 Kamil Kiełczewski


아래의 API로 조사 할 때 귀하의 질문에 http : // myApiUrl / login 대신 http://example.com을 사용합니다.

귀하의 페이지가 http : //my-site.local : 8088 에 있다고 가정합니다 .

다른 결과를 보는 이유는 다음과 같습니다.

  • 헤더 Host=example.com (API) 설정
  • 헤더 Origin 설정하지 않음

이것은 사이트와 API가 동일한 도메인을 가질 때 브라우저가 요청을 보내는 방법과 유사합니다 (브라우저는 헤더 항목 Referer=http://my-site.local:8088 을 설정하지만 Postman에서는 보이지 않습니다) . Origin 헤더가 설정 되지 않은 경우 일반적으로 서버는 기본적으로 이러한 요청을 허용합니다.

Enter image description here

이것이 Postman이 요청을 보내는 표준 방법입니다. 그러나 사이트와 API의 도메인이 다른 경우 브라우저가 요청을 다르게 보낸 다음 CORS 가 발생하고 브라우저가 자동으로 다음을 수행합니다.

  • 헤더 Host=example.com 을 설정합니다 (귀하의 API).
  • 헤더 Origin=http://my-site.local:8088 (귀하의 사이트)을 설정합니다.

헤더 참조자는 Origin 과 동일한 값을 갖습니다. 이제 Chrome의 콘솔 및 네트워크 탭에 다음이 표시됩니다.

Enter image description here

Enter image description here

Host != Origin 이것은 CORS이며 서버가 이러한 요청을 감지하면 일반적 으로 기본적 으로 요청을 차단합니다 .

Origin=null 은 로컬 디렉토리에서 HTML 컨텐츠를 열 때 설정되며 요청을 보냅니다. 동일한 상황은 아래 스 니펫과 같이 <iframe> 안에 요청을 보낼 때입니다 (그러나 여기서 Host 헤더는 전혀 설정되어 있지 않습니다). 일반적으로 HTML 사양은 모든 곳에서 불투명 원점을 말합니다. 원점으로 변환 할 수 있습니다 Origin=null 입니다. 이에 대한 자세한 내용은 여기를 참조하십시오 .

fetch('http://example.com/api', {method: 'POST'});
Look on chrome-console > network tab

간단한 CORS 요청을 사용하지 않는 경우 일반적으로 브라우저는 기본 요청을 보내기 전에 자동으로 OPTIONS 요청을 보냅니다. 자세한 정보는 여기에 있습니다 . 아래 스 니펫은 다음과 같습니다.

fetch('http://example.com/api', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json'}
});
Look in chrome-console -> network tab to 'api' request.
This is the OPTIONS request (the server does not allow sending a POST request)

CORS 요청을 허용하도록 서버 구성을 변경할 수 있습니다.

다음은 nginx (nginx.conf 파일)에서 CORS를 설정하는 구성 예 입니다. nginx에 대해 always/"$http_origin" 을 설정하고 Apache에 대해 "*" 를 설정하는 데 매우주의하십시오. 그러면 모든 도메인에서 CORS가 차단 해제됩니다.

location ~ ^/index\.php(/|$) {
   ...
    add_header 'Access-Control-Allow-Origin' "$http_origin" always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
    if ($request_method = OPTIONS) {
        add_header 'Access-Control-Allow-Origin' "$http_origin"; # DO NOT remove THIS LINES (doubled with outside 'if' above)
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Max-Age' 1728000; # cache preflight value for 20 days
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'My-First-Header,My-Second-Header,Authorization,Content-Type,Accept,Origin';
        add_header 'Content-Length' 0;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        return 204;
    }
}

다음은 Apache (.htaccess 파일)에서 CORS를 설정하는 구성 예입니다.

# ------------------------------------------------------------------------------
# | Cross-domain Ajax requests                                                 |
# ------------------------------------------------------------------------------

# Enable cross-origin Ajax requests.
# http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity
# http://enable-cors.org/

# <IfModule mod_headers.c>
#    Header set Access-Control-Allow-Origin "*"
# </IfModule>

# Header set Header set Access-Control-Allow-Origin "*"
# Header always set Access-Control-Allow-Credentials "true"

Access-Control-Allow-Origin "http://your-page.com:80"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Allow-Headers "My-First-Header,My-Second-Header,Authorization, content-type, csrf-token"