내 JavaScript 코드는 요청 된 리소스 "오류"오류에 "NO '액세스 제어 - 허용 원점'헤더가"오류가 있지 않습니까? "

IT / / 2022. 4. 7. 13:19

내 JavaScript 코드는 요청 된 리소스 "오류"오류에 "NO '액세스 제어 - 허용 원점'헤더가"오류가 있지 않습니까? "

질문

 

MOD 참고 사항 :이 질문은 XMLHTTPRequest / fetch / etc에 대한 정보입니다.브라우저에서 우편 배달부가 아닌 동안 동일한 액세스 정책 제한 (오류를 언급하는 오류가 발생합니다).이 질문은 "NO '액세스 제어 허용 기원'..."을 수정하는 방법에 관한 것이 아닙니다.그들이 일어난 이유에 관한 것입니다.

게시를 중지하십시오 : 태양 아래의 모든 언어 / 프레임 워크에 대한 Cors 구성.대신 귀하의 관련 언어 / 프레임 워크의 질문을 찾으십시오. 코르를 우회 할 수있는 제 3 자 서비스 다양한 브라우저에 대해 COR을 끄기위한 명령 줄 옵션

RESTful API 내장 플라스크에 연결하여 JavaScript를 사용하여 승인을 수행하려고합니다.그러나 요청을 할 때 다음 오류가 발생합니다.

xmlhttprequest http : // myApiURL / 로그인을로드 할 수 없습니다.요청 된 자원에 '액세스 제어 허용 기원'헤더가 없습니다.따라서 'null'원본은 허용되지 않습니다.

API 또는 원격 리소스가 헤더를 설정해야한다는 것을 알고 있지만 Chrome Extension 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);
  });

답변

 

내가 그것을 이해하면 페이지가 켜져있는 것보다 다른 도메인에 XMLHttpRequest를 수행 중입니다.따라서 브라우저가 보안 이유로 동일한 원점에서 요청을 허용하므로 브라우저가 차단됩니다.도메인 간 요청을 원할 때 다른 것을해야합니다.이를 달성하는 방법에 대한 자습서에 대한 튜토리얼.

포스트맨을 사용하는 경우이 정책에 의해 제한되지 않습니다.교차 원점에서 인용 된 xmlhttpRequest :

일반 웹 페이지는 XMLHTTPRequest 객체를 사용하여 원격 서버에서 데이터를 보내고받을 수 있지만 동일한 원본 정책으로 제한됩니다.확장은 그렇게 제한되지 않습니다.먼저 원본이 아닌 원격 사용 권한을 요청하는 한 Origin 외부의 원격 서버와의 확장자가 원격 서버와 대화 할 수 있습니다.

답변

경고 : 액세스 제어 - 허용 기원을 사용하는 것은 * API / 웹 사이트를 교차 사이트 요청 위조 (CSRF) 공격에 취약하게 할 수 있습니다.이 코드를 사용하기 전에 위험을 이해하는 것을 확실하게하십시오.

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

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

노드 레드를 사용하는 경우 다음 줄을 주석 처리하여 노드 - 빨간색 / 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-Cors를 먼저 설치해야합니다

$ pip install -U 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!"

자세한 내용은 플라스크 문서를 확인할 수 있습니다.

답변

때문에 $ .ajax ({type : "post"- 호출 옵션 $ .post (- 포스트를 호출합니다

둘 다 다르다.우편 맨은 "포스트"를 제대로 호출하지만, 전화 할 때 "옵션"이됩니다.

C # 웹 서비스 - Web API.

태그 아래에 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");
    }
});

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

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

답변

깊은

아래의 조사에서 API로서 http://example.com 대신 http://example.com을 사용합니다.귀하의 페이지가 http : //my-site.local : 8088에 있다고 가정합니다.

참고 : API와 페이지에는 다른 도메인이 있습니다!

다른 결과를 보는 이유는 우체원입니다.

header host = example.com (API) 헤더 원본을 설정하지 않습니다 우체부는 실제로 모든 웹 사이트 URL을 사용하지 않습니다 (당신은 당신의 API 주소 만 포스트맨에만 입력하십시오) - API에 대한 요청 만 보내므로 웹 사이트가 API와 동일한 주소가 동일하다고 가정합니다 (브라우저는이를 가정하지 않습니다)

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

javascript

이것은 포스트 맨이 요청을 보내는 표준 방법입니다.그러나 사이트와 API가 다른 도메인을 가지고있을 때 브라우저가 요청을 전송 한 다음 코르가 자동으로 자동으로 표시됩니다.

header host = example.com (API로)을 설정합니다. 헤더 Origin = http : //my-site.local : 8088 (사이트)

머리글 참조자는 원점과 동일한 값 을가집니다).그리고 이제 Chrome의 콘솔 및 네트워크 탭에서 다음을 볼 수 있습니다.

javascript

javascript

호스트가 있으면! = 원본이 CORS는 CORS이며 서버가 이러한 요청을 감지하면 일반적으로 기본적으로이를 차단합니다.

Origin = NULL은 로컬 디렉토리에서 HTML 컨텐츠를 열면 요청을 보냅니다.아래의 스 니펫 (그러나 여기에서는 호스트 헤더가 전혀 설정되지 않음)을