it-swarm-ko.tech

Postman이 아닌 경우 JavaScript 코드에 "No"Access-Control-Allow-Origin '헤더가 요청 된 리소스에 있습니다. "라는 오류가 표시되는 이유는 무엇입니까?

나는 RESTful 에 연결하여 JavaScript 를 사용하여 권한 부여를 시도하고 있습니다 API 내장 플라스크 . 그러나 요청을하면 다음과 같은 오류가 발생합니다.

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

API 또는 원격 리소스가 헤더를 설정해야한다는 것을 알고 있지만 크롬 확장 우편 발송자 를 통해 요청을했을 때 왜 작동 했습니까?

이것은 요청 코드입니다.

$.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);
    });
2174
Mr Jedi

내가 이해했다면 XMLHttpRequest 를 페이지가 아닌 다른 도메인으로 옮기고있는 것입니다. 따라서 브라우저는 보안상의 이유로 같은 Origin에서 요청을 허용하므로 차단합니다. 도메인 간 요청을 수행하려면 다른 작업을해야합니다. 달성 방법에 대한 자습서는CORS 사용.

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

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

1124

이것은 프로덕션을위한 수정이 아니거나 응용 프로그램이 클라이언트에 표시되어야 할 때 UI 및 Backend development가 다른 servers에 있고 프로덕션에서 실제로 동일한 서버에있는 경우에만 유용합니다. 예를 들어, 로컬에서 백엔드 서버를 가리 키도록 테스트해야하는 경우 모든 응용 프로그램의 UI를 개발하는 동안이 시나리오에서는 완벽한 수정 사항입니다. 프로덕션 수정 사항의 경우 CORS 헤더는 백엔드 서버에 추가되어 크로스 원점 액세스가 허용되어야합니다.

쉬운 방법은 Google 크롬에 확장 프로그램을 추가하여 CORS를 사용하여 액세스하도록 허용하는 것입니다.

( https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=ko -)

No 'access-control-allow-Origin' 헤더 요청에 대한 액세스를 허용 할 때마다이 확장을 활성화하십시오.

또는 

Windows의 경우 run 창에이 명령을 붙여 넣습니다. 

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

이렇게하면 'access-control-allow-Origin' 헤더 요청에 대한 액세스를 허용하는 새로운 chrome 브라우저가 열립니다.

485
shruti

JSON 답장을받을 수 있다면 도메인간에 말하기 위해 JSONP (끝 부분에P참고)를 사용해보십시오.

$.ajax({
  type: "POST",
  dataType: 'jsonp',
  ...... etc ......

JSONP 작업에 대해 자세히 알아보기 여기 :

본질적으로 합당한 크로스 사이트 스크립팅 해킹 인 JSONP의 출현으로 강력한 매시업이 탄생했습니다. 많은 유명한 사이트에서 JSONP 서비스를 제공하므로 미리 정의 된 API를 통해 콘텐츠에 액세스 할 수 있습니다.

322
Gavin

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

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

Warning : 공격자가 호출 할 수있는 PHP 파일의 보안 문제가 있습니다. 이 공격으로부터 파일/서비스를 보호하기 위해 세션 및 쿠키를 인증에 사용해야합니다. 귀하의 서비스는 사이트 간 요청 위조 (CSRF)에 취약합니다.

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"
},
200
shady sherif

나는 누군가가 나에게 오래 전에이 사이트를 공유했으면 좋겠다 http://cors.io/ 그것은 내 자신의 프록시를 구축하고 의존하는 것에 비해 엄청난 시간을 절약 할 수 있었다. 그러나 프로덕션 환경으로 이동하면 자신의 프록시를 사용하는 것이 데이터의 모든 측면을 여전히 제어하므로 최상의 방법입니다.

당신이 필요로하는 모든:

https://cors.io/?http://HTTP_YOUR_LINK_HERE

168
yoshyosh

Node.js 를 사용하는 경우 다음을 시도하십시오.

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

추가 정보 :ExpressJS상의 CORS

67
Nguyen Tran

Ajax를 사용하는 도메인 간 문제가 있습니다. http:// (또는 www.에서 액세스하고 http://www.를 (를) 포함한 동일한 경로에 게시)없이 동일한 www. 경로에서 파일에 액세스하고 있는지 확인해야합니다. 그러면 www. 경로를 통해 액세스 할 때 브라우저가 다른 도메인으로 간주하므로 문제가있는 곳을 볼 수 있습니다 입니다. Origin의 문제로 인해 다른 도메인에 게시 중이며 브라우저가 흐름을 차단합니다.

API 가 요청한 호스트와 동일하지 않은 경우 흐름이 차단되므로 API와 통신 할 수있는 다른 방법을 찾아야합니다.

63
Alin Razvan

때문에
$. ajax ({type : "POST"-호출 옵션
$. post (-전화 POST

둘 다 다른 Postman 호출 "POST"는 적절하지만 호출 할 때 "OPTIONS"가됩니다.

C # 웹 서비스의 경우-webapi

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

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

아약스 호출에서 실수하지 않도록하십시오

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

각도 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");
56
George Livingston

XDomain 을 시도해보십시오.

요약 : 순수한 JavaScript CORS 대안/polyfill. 서버 구성 필요 없음 - 통신하려는 도메인에 proxy.html을 추가하기 만하면됩니다. 이 라이브러리는 XHook을 사용하여 all XHR 을 후킹합니다. 따라서 XDomain은 모든 라이브러리와 함께 작동해야합니다.

22
user3359786

원하지 않는 경우 :

  1. Chrome에서 웹 보안 사용 중지
  2. JSONP 사용
  3. 타사 사이트를 사용하여 요청을 다시 라우팅하십시오.

서버에 CORS가 활성화되어 있는지 확인하십시오 (CORS 테스트 : http://www.test-cors.org/ ).

그런 다음 Origin 매개 변수를 요청과 함께 전달해야합니다. 이 Origin은 브라우저가 요청과 함께 전송 한 Origin과 일치해야합니다.

여기에서 실제 상황을 볼 수 있습니다. http://www.wikinomad.com/app/detail/Campgrounds/3591

편집 기능은 데이터를 가져 오기 위해 다른 도메인에 GET & POST 요청을 보냅니다. 문제를 해결하는 Origin 매개 변수를 설정합니다. 백엔드는 mediaWiki 엔진입니다.

tldr : 호출에 "Origin"매개 변수를 추가합니다.이 매개 변수는 브라우저가 보내는 Origin 매개 변수 여야합니다 (Origin 매개 변수를 스푸핑 할 수 없습니다)

11
Ganesh Krishnan

AngularJS를 사용하여 API에 액세스 할 때 문제가있었습니다. 같은 요청이 SoapUI 5.0 및 ColdFusion에서 작동했습니다. 내 GET 메소드에는 이미 Access-Control-Allow-Origin 헤더가 있습니다.

나는 AngularJS가 "시험"OPTIONS 요청 을 만든다는 것을 알았습니다. ColdFusion은 기본적으로 OPTIONS 메소드를 생성하지만,이 헤더는 특별히 많지 않습니다. 오류는 OPTIONS 호출에 대한 응답으로 생성 된 것이지 GET에 대한 의도적 인 호출에는 발생하지 않았습니다. 아래 OPTIONS 메서드를 내 API에 추가 한 후 문제가 해결되었습니다.

<cffunction name="optionsMethod" access="remote" output="false" returntype="any" httpmethod="OPTIONS" description="Method to respond to AngularJS trial call">
    <cfheader name="Access-Control-Allow-Headers" value="Content-Type,x-requested-with,Authorization,Access-Control-Allow-Origin"> 
    <cfheader name="Access-Control-Allow-Methods" value="GET,OPTIONS">      
    <cfheader name="Access-Control-Allow-Origin" value="*">      
    <cfheader name="Access-Control-Max-Age" value="360">        
</cffunction>
8
Leonid Alzhin

서버에서 응답을 요청할 때 동일한 오류가 발생하는 다음 구성이 있습니다.

서버 쪽 :SparkJava ->는 REST-API를 제공합니다.
클라이언트 측 :ExtJs6 -> 브라우저 렌더링 제공 

server-side응답에 이것을 추가해야했습니다 : 

Spark.get("/someRestCallToSpark", (req, res) -> {
    res.header("Access-Control-Allow-Origin", "*"); //important, otherwise its not working 
    return "some text";
 });

클라이언트 쪽나는 (요청) 추가 요청에) 

Ext.Ajax.request({
    url: "http://localhost:4567/someRestCallToSpark",
    useDefaultXhrHeader: false, //important, otherwise its not working
    success: function(response, opts) {console.log("success")},
    failure: function(response, opts) {console.log("failure")}
});
8
kiltek

shruti의 답변 을 토대로 필자는 필요한 인수를 사용하여 Chrome 브라우저의 바로 가기를 만들었습니다.  enter image description here  enter image description here

8
Mohammad AlBanna

https://github.com/Rob--W/cors-anywhere/ 는 자체 CORS 프록시를 설정하고 실행하는 데 사용할 수있는 (Node.js) 코드를 제공합니다. 적극적으로 유지 관리되며 올바른 Access-Control-* 응답 헤더를 기본 전송하는 것 이상의 프록시 동작을 제어하는 ​​여러 가지 기능을 제공합니다.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS 에는 브라우저가 클라이언트 측 웹 응용 프로그램이 JavaScript에서 생성하는 교차 원어 요청을 처리하는 방법과 필요한 헤더를 설명하는 세부 정보가 있습니다 가능한 경우 서버가 요청을 전송하도록 구성합니다.

요청을하고 응답을 얻는 데 필요한 사이트가 Access-Control-Allow-Origin 응답 헤더를 반환하지 않는 경우 브라우저는 always 클라이언트가 직접 만든 교차 원어 요청을 차단합니다. 사이드 자바 스크립트 코드가 작동하지 않습니다. 사이트가 제어 할 수있는 사이트가 아니고 행동을 구성 할 수있는 경우 will 는 자신의 프록시를 통해 또는 공개 프록시를 통해 요청을 프록시 처리하는 유일한 방법입니다.

다른 의견에서 언급했듯이 요청에 공개 프록시를 신뢰하지 않는 데는 충분한 이유가 있습니다. 즉, 자신이하는 일을 알고 있고 필요에 따라 개방형 프록시가 작동한다고 결정하면 https://cors-anywhere.herokuapp.com/ 는 안정적으로 사용 가능하고 적극적으로 유지 관리되며 실행됩니다. https://github.com/Rob--W/cors-anywhere/ 코드의 인스턴스.

여기에 언급 된 다른 공개 프록시 (적어도 두 가지가 더 이상 사용할 수없는 것 같습니다)와 마찬가지로 작동하는 방식은 클라이언트 코드가 직접 요청을 보내도록하는 것입니다 (예 : http://foo.com). https://cors-anywhere.herokuapp.com/http://foo.com 그리고 프록시는 브라우저가 보는 응답에 필요한 Access-Control-* 헤더를 추가합니다.

7
sideshowbarker

YQL을 사용하여 야후의 서버를 통해 요청을 프록시함으로써 문제를 피할 수 있습니다. 몇 줄의 코드 일뿐입니다.

var yql_url = 'https://query.yahooapis.com/v1/public/yql';
var url = 'your api url';

$.ajax({
    'url': yql_url,
    'data': {
        'q': 'SELECT * FROM json WHERE url="'+url+'"',
        'format': 'json',
        'jsonCompat': 'new',
    },
    'dataType': 'jsonp',
    'success': function(response) {
        console.log(response);
    },
});

여기에 설명이있는 링크가 있습니다 : https://vverma.net/fetch-any-json-using-jsonp-and-yql.html

7
camnesia

Entity Framework 를 사용하는 경우 CORS이 활성화 된 경우에도 때때로이 오류가 발생하는 것 같습니다. 나는 쿼리의 마무리가 빠져서 오류가 발생했다고 알았습니다. 나는 이것이 동일한 상황에서 다른 사람들을 도울 것이라고 기대하고 있습니다.

다음 코드는 XMLHttpRequest cannot load http://myApiUrl/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. 오류를 throw 할 수 있습니다.

using (DBContext db = new DBContext())
{
    return db.Customers.Select(x => new
    {
        Name = x.Name,
        CustomerId = x.CustomerId,
    });
}

이 문제를 해결하려면 다음과 같이 .ToList() 또는 .FirstOrDefault()과 같은 최종 호출이 필요합니다.

using (DBContext db = new DBContext())
{
    return db.Customers.Select(x => new
    {
        Name = x.Name,
        CustomerId = x.CustomerId,
    }).ToList();
}
5
Loyalar

제 경우에는 JEE7 JAX-RS 응용 프로그램을 사용하고 있었고, 다음 트릭은 완벽하게 작동했습니다.

@GET
    @Path("{id}")
    public Response getEventData(@PathParam("id") String id) throws FileNotFoundException {
        InputStream inputStream = getClass().getClassLoader().getResourceAsStream("/eventdata/" + id + ".json");
        JsonReader jsonReader = Json.createReader(inputStream);
        return Response.ok(jsonReader.readObject()).header("Access-Control-Allow-Origin", "*").build();
    }
5
Bhuwan Gautam

브라우저에서이 오류 메시지가 나타나는 경우 :

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '…' is therefore not allowed access

사용자가 제어 할 수없는 원격 서버에 Ajax POST/GET 요청을 할 때이 간단한 수정을 잊어 버리십시오.

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

특히 JavaScript를 사용하여 Ajax 요청을 수행하는 경우, 즉 쿼리를 가져 와서 원격 서버로 보내는 내부 프록시가 필요한 경우가 있습니다.

먼저 JavaScript 코드에서 다음과 같이 Ajax 호출을 자신의 서버로 보냅니다.

$.ajax({
    url: yourserver.com/controller/proxy.php,
    async: false,
    type: "POST",
    dataType: "json",
    data: data,
    success: function (result) {
        JSON.parse(result);
    },
    error: function (xhr, ajaxOptions, thrownError) {
        console.log(xhr);
    }
});

그런 다음 proxy.php라는 간단한 PHP 파일을 작성하여 POST 데이터를 랩핑하고 원격 URL 서버에 매개 변수로 추가하십시오. Expedia 호텔 검색 API를 사용하여이 문제를 어떻게 우회하는지 예제를 들어 보겠습니다.

if (isset($_POST)) {
  $apiKey = $_POST['apiKey'];
  $cid = $_POST['cid'];
  $minorRev = 99;

  $url = 'http://api.ean.com/ean-services/rs/hotel/v3/list?' . 'cid='. $cid . '&' . 'minorRev=' . $minorRev . '&' . 'apiKey=' . $apiKey;

  echo json_encode(file_get_contents($url));
 }

수행함으로써 :

echo json_encode(file_get_contents($url));

당신은 단지 같은 쿼리를하고 있지만, 서버 측과 그 이후에는 괜찮습니다.

NIZARBSB

4
Flash

성공적으로 htaccess를 사용하여 글꼴을 해결할 수 있었지만 분명히 OP는 약간의 차이점을 묻습니다. 그러나 FileMatch 패턴을 사용하고 임의의 확장자를 추가하여 크로스 오류를주지 않도록 할 수 있습니다.

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

https://httpd.Apache.org/docs/2.4/mod/core.html#filesmatch

4
Danish

GoLang API의 경우 :

먼저 MDN CORS Doc 를보고 CORS가 무엇인지 알 수 있습니다. 내가 아는 한 CORS는 Origin of Request가 서버 리소스에 액세스 할 수 있는지 여부를 결정합니다.

그리고 Server Response의 HeaderAccess-Control-Allow-Origin를 설정하여 Origin이 서버에 액세스 할 수있는 요청을 제한 할 수 있습니다.

예를 들어 서버 응답에 헤더를 설정하면 http://foo.example에서 보낸 요청 만 서버에 액세스 할 수 있습니다.

Access-Control-Allow-Origin: http://foo.example

모든 출처 (또는 도메인)에서 보낸 다음 허용 요청을 따르십시오.

Access-Control-Allow-Origin: *

그리고 오류 메시지에서 알 수 있듯이 requested resource는 서버 리소스를 의미하므로 No 'Access-Control-Allow-Origin' header is present on the requested resource.는 서버 응답에 Access-Control-Allow-Origin 헤더를 설정하지 않았거나 설정했을 수 있지만 요청의 원본이 Access-Control-Allow-Origin에없는 목록이므로 요청이 허용되지 않습니다. 접속하다:

'Access-Control-Allow-Origin'헤더가 요청 된 리소스에 없습니다. 따라서 원본 'null'은 액세스가 허용되지 않습니다.

GoLang에서 gorilla/mux 패키지를 사용하여 localhost:9091에서 API 서버를 작성하고 CORS에 응답 헤더에 "Access-Control-Allow-Origin", "*"를 추가하여 허용합니다.

func main() { // API Server Code
    router := mux.NewRouter()
    // API route is /people,
    //Methods("GET", "OPTIONS") means it support GET, OPTIONS
    router.HandleFunc("/people", GetPeople).Methods("GET", "OPTIONS")
    log.Fatal(http.ListenAndServe(":9091", router))
}

// Method of '/people' route
func GetPeople(w http.ResponseWriter, r *http.Request) {

    // Allow CORS by setting * in sever response
    w.Header().Set("Access-Control-Allow-Origin", "*")

    w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
    json.NewEncoder(w).Encode("OKOK")
}

그리고 저는 클라이언트에서 JavaScript를 사용합니다. localhost:9092에서 Chrome의 요청이 서버 localhost:9091에서 "OKOK"를 성공적으로 가져올 수 있습니다.

function GetPeople() {
    try {
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET", "http://localhost:9091/people", false);
        xhttp.setRequestHeader("Content-type", "text/html");
        xhttp.send();
        var response = JSON.parse(xhttp.response);
        alert(xhttp.response);
    }
    catch (error) {
        alert(error.message);
    }
}

게다가 Fiddler과 같은 도구를 사용하여 요청/응답 헤더를 확인할 수 있습니다.

4
yu yang Jian

대중적인 질문 - 당신이 지금까지 읽었고 다른 어떤 것도 도움이되지 않았다면 살펴 봐야 할 또 다른 것. Akamai, Limelight 또는 이와 유사한 CDN이있는 경우 자원의 URI에 대한 캐시 키를 확인할 수 있습니다. Origin 헤더 값이 포함되어 있지 않으면 다른 Origin에서 요청할 때 캐시 된 응답을 반환 할 수 있습니다. 방금 반나절을 디버깅에 보냈습니다. CDN 구성이 업데이트되어 우리의 일부 선택 도메인에 대한 원본 값 만 포함되고 다른 모든 도메인에 대해서는 null로 설정됩니다. 이것은 작동하는 것으로 보이고 알려진 도메인의 브라우저가 리소스를 볼 수있게합니다. CDN이 브라우저의 첫 번째 홉일 경우 여기에 대한 모든 다른 대답은 필수 사항이지만 CDN은 검토 할 항목입니다. 

우리의 경우 우리는 서비스 요청에 대한 요청을 볼 수 있었지만 사이트가 전송 한 요청은 거의 볼 수 없었습니다. 그것은 우리에게 CDN을 지적했습니다. 우리는 원래의 요청이 브라우저 AJAX 호출 및 응답 헤더 Access-Control-Allow-Origin에 포함되지 않은 직접 요청에서 제공된 것을 확인할 수있었습니다. 분명히 CDN이이 값을 캐싱했습니다. Akamai CDN 구성은 게임의 일부로 Origin 요청 헤더 값을 고려하여 Tweak가 작동하도록 만들었습니다.

4
4
Jared

몇 가지 이유 중 하나 때문에 자바 스크립트에서 내 PHP API에이 시간이 많이 발생합니다. 나는 <?php header('Access-Control-Allow-Origin: *'); ?을 놓는 것을 잊어 버립니다. 이는 하위 도메인 간 액세스에 유용합니다. 또 다른 이유는 jQuery ajax 요청에서 특정 dataType을 지정하고 다른 dataType을 반환하기 때문에 오류가 발생하기 때문입니다. 

이 오류의 마지막이자 가장 중요한 이유는 요청한 페이지에 구문 분석 오류가 있기 때문입니다. 브라우저에서 해당 페이지 URL을 눌렀다면 구문 분석 오류가 표시되고 문제를 해결할 줄 번호가 표시됩니다. 

나는 이것이 누군가를 돕기를 바랍니다. 이것을 디버깅 할 때마다 시간이 좀 걸렸고 확인해야 할 사항에 대한 체크리스트를 갖고 싶습니다.

3
Garrett Tacoronte

Jsonp 요청에서 "jsonpCallback"을 잡아 돌려 보내야합니다.

$.ajax({
      url: lnk,
      type: 'GET',
      crossDomain: true,
      dataType: 'jsonp',
      success: function (ip) { console.log(ip.ip); },
      error: function (err) { console.log(err) }
});

백엔드 측 (백엔드 PHP로 사용하는 경우)

echo $_GET['callback'].'({"ip":"192.168.1.1"})';

이 경우 백엔드 응답은 다음과 같이 보입니다. 

jQuery331009526199802841284_1533646326884 ({ "ip": "192.168.1.1"})

프론트 엔드에서 "jsonpCallback"을 수동으로 설정하고 백엔드 측에서 잡을 수 있습니다

$.ajax({
      url: lnk,
      type: 'GET',
      crossDomain: true,
      dataType: 'jsonp',
      jsonpCallback: 'get_ip',
      success: function (ip) { console.log(ip.ip); },
      error: function (err) { console.log(err) }
});

이 경우 백엔드 응답은 다음과 같이 보입니다. 

get_ip ({ "ip": "192.168.1.1"})

2
Alexey Kolotsey

내 웹 사이트 (.NET 기반)에서 방금 추가했습니다 :

<system.webServer>
 <httpProtocol>  
    <customHeaders>  
     <add name="Access-Control-Allow-Origin" value="*" />  
     <add name="Access-Control-Allow-Headers" value="Content-Type" />  
     <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />  
    </customHeaders>  
  </httpProtocol>         
</system.webServer>

비디오에 큰 감사드립니다.

2
FrenkyB

이 문제를 프론트 엔드가 아닌 백엔드 (Flask)에서 수정하려는 경우 플라스크 CORS Python 패키지를 전적으로 권장합니다. 플라스크 코르스

App.py에 하나의 간단한 라인을 추가하면 표준을 자동으로 삽입하여 모든 Origin 헤더를 허용하거나 필요에 따라이를 사용자 정의 할 수 있습니다.

2
Ben Watts

완전성을 위해 Apache 는 cors를 허용합니다.

Header set Access-Control-Allow-Origin "http://www.allowonlyfromthisurl.com"
Header set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header set Access-Control-Max-Age "1000"
Header set Access-Control-Allow-Headers "x-requested-with, Content-Type, Accept-Encoding, Accept-Language, Cookie, Referer"
2
zak

CORS가 당신을위한 것입니다.

CORS는 "Cross Origin Resource Sharing"이며 도메인 간 요청을 보내는 방법입니다. 이제 XMLHttpRequest2와 Fetch API는 모두 CORS를 지원합니다.

하지만 한계가 있습니다. 서버는 Access-Control-Allow-Origin을 명시해야하며 '*'로 설정할 수 없습니다.

Origin이 요청을 보낼 수있게하려면 JSONP가 필요합니다 (또한 Access-Control-Allow-Origin가 필요하지만 '*'일 수도 있음).

당신이 무엇을 선택할 지 모른다면 많은 요청 방법을 위해, 나는 당신이 그것을하기위한 완전한 기능적 구성 요소가 필요하다고 생각합니다. 간단한 구성 요소catta


최신 브라우저 (> Internet Explorer9, Chrome, Firefox, Edge, 등)를 사용하는 경우 간단하지만 아름다운 구성 요소 인https://github.com/Joker- 젤리/catta. 의존성이없고, 3KB 미만이며, 죽은 단순한 구문과 옵션으로 Fetch, Ajax 및 JSONP를 지원합니다.

catta('./data/simple.json').then(function (res) {
  console.log(res);
});

또한 ES6 모듈, CommonJS 및 HTML의 <script>와 같은 프로젝트로 가져 오는 모든 방법을 지원합니다.

2
Jelly

대부분의 이러한 응답은 제어하는 ​​서버에 CORS 헤더를 추가하는 방법을 사용자에게 알려줍니다.

그러나 웹 페이지에서 제어하지 않는 서버의 데이터가 필요한 경우 한 가지 해결책은 페이지에 스크립트 태그를 만들고 CORS 헤더가없는 API 끝점에 src 속성을 설정 한 다음 해당 데이터를로드하는 것입니다 페이지에

window.handleData = function(data) {
  console.log(data)
};

var script = document.createElement('script');
script.setAttribute('src','https://some.api/without/cors/headers.com&callback=handleData');
document.body.appendChild(script);
2
duhaime

Angle에서 $http.get로이 오류가 발생했습니다. 나는$http.jsonp를 사용해야했습니다.

2
Travis Heeter

어쩌면 복잡하지는 않지만 웹 서버를 사용하여 요청을 라우팅 할 수 있습니다. nodejs를 사용하면이 문제를 해결할 수 있습니다. 나는 노드 js의 전문가가 아니다. 그래서 이것이 깨끗한 코드인지 모른다. 

그러나 이것은 나를 위해 일한다.

다음은 약간의 예입니다.

노드 JS

var rp = require('request-promise');
var express = require('express'),
    app = express(),
    port = process.env.PORT || 3000;
var options = {
    method: 'POST',
    uri: 'http://api.posttestserver.com/post',
    body: {
        some: 'payload'
    },
    json: true // Automatically stringifies the body to JSON
};
app.get('/', function (req, res) {
        rp(options)
        .then(function (parsedBody) {
            res.send(parsedBody)
        })
        .catch(function (err) {
            res.send(err)
        });
});
app.listen(port);

JS

axios.get("http://localhost:3000/").then((res)=>{
    console.log('================res====================');
    console.log(res);
    console.log('====================================');
})
1
KT Works

서버가 Spring Boot 앱인 경우 나머지 컨트롤러에이 주석을 맨 위에 추가하십시오-@CrossOrigin

지금 작동합니다. 감사

1
Maiden

application_controller.rb에있는 Ruby on Rails 서버의 경우 다음을 추가하십시오.

after_action :cors_set_access_control_headers

def cors_set_access_control_headers
  headers['Access-Control-Allow-Origin'] = '*'
  headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
  headers['Access-Control-Allow-Headers'] = '*'
end
1
张健健

'Access-Control-Allow-Origin'헤더가 요청 된 리소스에 없습니다. 따라서 Origin ' https://sx.xyz.com '는 액세스가 허용되지 않습니다.

나는 또한 Ajax 응답에서 Cross Domain Data Exchange와 비슷한 문제를 error undefined 로 보았습니다. 그러나 헤더의 응답은 상태 코드 : 200 OK

Failed to load https://www.Domain.in/index.php?route=api/synchronization/checkapikey:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'https://sx.xyz.in' is therefore not allowed access.

해결할 해결책 : 제 경우에는 checkapikey () 함수를 Ajax를 통해 다른 도메인으로 호출하고 호출이 이루어진 곳의 데이터로 응답을 얻습니다.

if (($this->request->server['REQUEST_METHOD'] == 'POST') && isset($this->request->server['HTTP_Origin'])) {

        $this->response->addHeader('Access-Control-Allow-Origin: ' . $this->request->server['HTTP_Origin']);
        $this->response->addHeader('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
        $this->response->addHeader('Access-Control-Max-Age: 1000');
        $this->response->addHeader('Access-Control-Allow-Credentials: true');
        $this->response->addHeader('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');

        $headers = getallheaders();
...
}
1
Nishanth ॐ

이 솔루션은 확실히 당신을 위해 작동합니다. 사용자 지정 메시지 핸들 추가

public class CustomHeaderHandler : DelegatingHandler
{
    protected override async Task<HttpResponseMessage> SendAsync(
            HttpRequestMessage request, CancellationToken cancellationToken)
    {
        HttpResponseMessage response = await base.SendAsync(request, cancellationToken);
        var referrer = request.Headers.Referrer;
        if (referrer != null && !response.Headers.Contains("Access-Control-Allow-Origin"))
        {
            response.Headers.Add("Access-Control-Allow-Origin", referrer.Scheme + "://" + referrer.Authority);
        }
        return response;
    }
}

Webapiconfig.cs에 등록하십시오.

config.MessageHandlers.Add (새 CustomHeaderHandler ());

그리고 SignalR을 사용하고 있다면이 코드를 globle.asax.cs 파일에 추가하십시오.

protected void Application_BeginRequest(object sender, EventArgs e)
        {
            var referrer = Request.UrlReferrer;
            if (Context.Request.Path.Contains("signalr/") && referrer != null)
            {
                Context.Response.AppendHeader("Access-Control-Allow-Origin", referrer.Scheme + "://" + referrer.Authority);
            }
        }
1
Ujjwal

Opera (Chrome과 동일하게 작동합니다), 다음 명령으로 브라우저를 시작했습니다.

opera --user-data-dir="~/Downloads/opera-session" --disable-web-security

문제가 해결되었습니다! 이제 로컬 하드 디스크 드라이브 (하드 디스크 드라이브)에서 작업하고 Ajax 요청을 동일한 파일의 원격 원본으로 호출 할 수 있습니다.

Note 1 : 홈 디렉토리에있는 폴더는 --user-data-dir로 지정할 수 있습니다.

참고 2 :Debian 8 (Jessie)/Opera 39에서 테스트되었습니다.

Here is a screenshot

위의 매개 변수없이 정상적으로 시작하면 동일한 요청이 오류 코드 블록에 속합니다.

0
csonuryilmaz

프로덕션 서버에서 개발 서버로 리소스를 복사하고 리소스 URL을 동적으로 조정할 수 있습니다. 그렇게하면 같은 Origin에서 항상 읽음으로써 Cross Origin 예외를 제거 할 수 있습니다.

0
bachstein

제 경우에는 스프링 부트를 서비스로 사용했습니다. 책임감있는 작업에 Cross Annotation 주석을 추가 할 수 있습니다.

@CrossOrigin(origins = "http://localhost:4200")
@RequestMapping(value = "getFoo", method = RequestMethod.GET)
public ResponseEntity getFoo(){
    // do something
} 
0
Chandan Kumar

내 도메인에서 외부 도메인의 콘텐츠를 가져와 보여주는 간단한 브리지를 만들었습니다.

<?php
header("Content-Type: text/plain");
if (isset($_GET["cnic"]))
{
    $page = file_get_contents("https://external.domain.com/api/verify/" . $_GET["cnic"]);
    echo $page;
}
else
{
    echo "";
}

?>

이제 AJAX에서 외부 도메인에 액세스하는 대신이 브리지 파일의 URL을 배치했습니다.

필요에 따라 Content-Type를 조정해야합니다. 데이터가 JSON에 있으면 header("Content-Type: application/json");을 사용하십시오.

0
Muhammad Saqib

단지 그것을 우회하는 또 다른 방법을 언급하기 위해 - AJAX proxy. 다른 Origin에서 데이터를 가져오고 요청을 다시 보내도록 서버에 요청을 보냅니다.

잠재적 인 보안 문제가 있기 때문에 JSONP보다이 방법을 선호합니다.

0
carobnodrvo

웹 API에 액세스하는 클라이언트 URL에 대해 CORS를 사용 설정하여이 문제를 해결했으며 성공적으로 처리했습니다.

예 :

[EnableCors(origins: "http://clientaccessingapi.com", headers: "*", methods: "*")]
0
Rizwan ali