Jquery AJAX : 요청한 리소스에 'Access-Control-Allow-Origin'헤더가 없습니다.

Question

localhost : 4502 포트에서 API에 데이터를 게시하려고합니다. POSTMAN을 사용하여이 API에 데이터를 게시하려 할 때 Basic Authorization 키를 제공하여 백엔드에 데이터가 추가되었습니다. 같은 Ajax Jquery 호출을 여기에 구현할 시도하고 있지만 CORS 오류가 점점. jquery에서 처음으로 데이터를 게시하려고하는데 여기에서 도와주세요. 내가 추가 할 수있는 부분이 있습니다. 사용자 이름과 비밀번호를 비워 둘 수 있으므로 기본 인증을위한 API 키가 있습니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

    <script> 
       $(document).ready(function(){ 
       $("#Save").click(function(){ 

        var person = new Object(); 
        person.Name = $('#Name').val(); 
        person.EmailAddress = $('#EmailAddress').val(); 
        person.CustomFields = [0]; 
        person.CustomFields[0].Key = "[Country]"; 
        person.CustomFields[0].Value = $('#Country').val();; 

       $.ajax({ 
       url: 'https://api.createsend.com/api/v3.1/subscribers/7c7a6087b0e450ad72b38be83098e271.json', 
       type: 'POST', 
       dataType: 'json', 
       data:person, 
       success: function(data,textStatus,xhr){ 

        console.log(data); 
       }, 
       error: function(xhr,textStatus,errorThrown){ 
        console.log('Error Something'); 
       }, 
       beforeSend: function(xhr) { 

        xhr.setRequestHeader("Authorization", "Basic OTdlMjVmNWJiMTdjNzI2MzVjOGU3NjlhOTI3ZTA3M2Q5MWZmMTA3ZDM2YTZkOWE5Og=="); 
       } 
      }); 
     }); 
    }); 
    </script> 

Answer 1

그것의 CORS 문제는, 당신의 API는 API를 액세스하는 다른 IP 주소 또는 다른 기원을 허용하기 위해, 원격 또는 다른 출처에서 직접 액세스 할 수 없습니다, 당신은 '액세스 제어-Allow-을 추가해야합니다 Origin '을 선택하면 모든 사용자가 액세스 할 수 있도록하려는 경우 값을'* '로 설정하거나'http://siteA.com '또는'http://192 '과 같은 특정 도메인 또는 ips를 설정할 수 있습니다. IP 주소 '; 당신이 아약스를 사용하여 검색 및 디스플레이 데이터 헤더는 다음과 같이한다면

, 그것은

, 당신은 어떻게 표시되는 JSON 데이터에 따라 달라질 수 있습니다 귀하의 API를 헤더에 포함

$.ajax({ 
    url: '', 
    headers: { 'Access-Control-Allow-Origin': 'htt://site allowed to access' } 
    data:, 
    type: 
    /* etc */ 
    success: function(jsondata){ 

    } 
}) 

Answer 2

dataType : 'jsonp'를 추가했으며 작동합니다!

$.ajax({ 
    type: 'GET', 
    crossDomain: true, 
    dataType: 'jsonp', 
    url: '', 
    success: function(jsondata){ 

    } 
}) 

Answer 3

클라이언트 측에서 도메인 간 요청 (즉 요청을 만들려고 노력하는 코드를 실행하려고 할 때 이러한 오류가 사용자의 브라우저에 의해 사용되는 올 것입니다 유의해야합니다). 나는 여러 가지 방법을 사용하여 CORS 오류를 해결하려고 시도한이 물건에 대해 처음 배우기 시작한 지 수 주일이 걸렸지 만 웹에서 많은 답변을 이해하지 못했습니다. 왜냐하면 실제로이 문제를 해결할 필요가 있음을 명확히하지 않았기 때문입니다. 브라우저 (클라이언트 측 JS)와 같은 서버 측은 일반적으로 이러한 요청을 차단합니다.

서버 응답 헤더를 설정하는 방법을 모른다면 완전히 좋습니다. - 그런 다음 PHP 나 Node.JS (JS를 사용하여 서버를 만드는)와 같은 매우 간단한 서버 측 스크립팅을 조사해야한다는 것을 알아야합니다.

기본적으로이 코드가 클라이언트 (브라우저 - 즉 : 요소를 검사하거나 '소스보기'및이 코드를 볼 때 서버 측이 아닌 경우)에서로드하는 경우 브라우저 콘솔에서이 오류가 표시되는 경우) 당신은 이런 문제에 빠지게 될 것입니다.

다시 한번이 문제에 대한 기본적인 설명으로,이 문제가 발생할 때 서버 측 요청과 클라이언트 측 요청의 차이점을 알고 있는지 확인하십시오. jquery 스크립트 src 태그 아마도 이것이 클라이언트 측에서 실행 중일 수 있다고 생각하게 만듭니다.