development

여기에 "Access-Control-Allow-Origin에서 원본을 사용할 수 없습니다"오류가 표시되는 이유는 무엇입니까?

big-blog 2020. 6. 10. 07:53
반응형

여기에 "Access-Control-Allow-Origin에서 원본을 사용할 수 없습니다"오류가 표시되는 이유는 무엇입니까? [복제]


이 질문에는 이미 답변이 있습니다.

다음과 같은 오류가 나타납니다.

Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin

이 코드로 :

var http = new getXMLHttpRequestObject();
var url = "http://gdata.youtube.com/action/GetUploadToken";
var sendXML = '<?xml version="1.0"?><entry xmlns="http://www.w3.org/2005/Atom"'+
    'xmlns:media="http://search.yahoo.com/mrss/'+
    'xmlns:yt="http://gdata.youtube.com/schemas/2007">'+
    '<media:group><media:title type="plain">My First API</media:title>'+
    '<media:description type="plain">First API</media:description>'+
    '<media:category scheme="http://gdata.youtube.com/schemas/2007/categories.cat">People</media:category>'+
    '<media:keywords>first, api</media:keywords></media:group></entry>';
http.open("POST", url, true);
http.setRequestHeader("Authorization", "AuthSub token=" + AccessToken);
http.setRequestHeader("X-GData-Key", "key="+ dev_key);
http.setRequestHeader("Content-Type", "application/atom+xml; charset=UTF-8");

http.onreadystatechange = function() {
    if(http.readyState == 4) {
        alert(http.responseXML);
    }
}
http.send(sendXML);

이 문제의 원인은 무엇이며 어떻게 해결합니까?


현재 도메인 외부에서 Ajax 요청을 작성하는 경우 Javascript가 제한됩니다.

  • 예 1 : 도메인이 example.com이고 test.com =>에 요청할 수 없습니다.
  • 예 2 : 도메인이 example.com이고 inner.example.com =>에 요청하려고합니다.
  • 예 3 : 도메인이 example.com:80이고 example.com:81 =>에 요청하려고합니다.
  • 예 4 : 도메인이 example.com이고 example.com에 요청하려고합니다. => 가능합니다.

Javascript는 보안상의 이유로 "동일한 원본 정책"에 의해 제한되므로 악의적 인 스크립트가 원격 서버에 접속하여 중요한 데이터를 보낼 수 없습니다.

jsonp 는 자바 스크립트를 사용하는 다른 방법입니다. 요청을하고 결과는 클라이언트에서 실행되는 콜백 함수로 캡슐화됩니다. 새 스크립트 태그를 html의 헤드 부분에 연결하는 것과 같습니다 (여기서 다른 도메인에서 스크립트를로드 할 수 있음을 알고 있습니다).
그러나 jsonp를 사용하려면 서버를 올바르게 구성해야합니다. 그렇지 않은 경우 jsonp를 사용할 수 없으며 반드시 서버 측 프록시 (PHP, ASP 등)에 의존해야합니다. 이 주제와 관련된 많은 가이드가 있습니다 .Google!


localhost:8080"동일한 원본 정책"으로 인해 XMLHttpRequest가 도달 할 수 없습니다 .

다음에 대한 응답에 헤더를 추가하여 최신 브라우저의 요청을 허용 할 수 있습니다 localhost:8080.

Access-Control-Allow-Origin: *

HTTP 서버에 지시문을 추가하거나 서버 측 코드 (PHP, Ruby 등)를 통해 헤더를 추가하면됩니다.

https://developer.mozilla.org/en/http_access_control 에서 Cross-Origin ajax 요청에 대해 자세히 알아보십시오.


Chrome을 사용하는 경우 간단한 해결 방법 (개발 목적으로 만 사용)은 option을 사용하는 것 --disable-web-security입니다.


솔루션에 global.asax를 추가하십시오.

더하다

HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");

protected void Application_BeginRequest(object sender, EventArgs e)
{
}

아파치를 사용하는 경우 작동합니다.이 파일을 공개 루트에 .htaccess 파일에 넣고 / 만들고 다른 파일 확장자를 추가하십시오.

<FilesMatch "\.(ttf|otf|eot|woff|jpg|png|jpeg|gif|js|json|html|css)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

로컬 개발의 경우 HTTP 응답 헤더를 수정하기위한 도구를 사용할 수 있습니다. 예를 들어 Charles 는 포함 된 다시 쓰기 도구를 사용하여이 작업을 수행 할 수 있습니다. 다시 쓰기 도구

Just add a new rule for the target domain/location with:

Type: Add Header
Where: Response
Replace
     Name: Access-Control-Allow-Origin
     Value: *
Replace All

Here, we need to do two things for Apache Http

1) In httpd.config file, uncomment this file

LoadModule headers_module modules/mod_headers.so

2) Add this line at the bottom.

Header set Access-Control-Allow-Origin "*"

if you re using google chrome as a browser you can add CORS extension, and activate it , it will solve the hole problem without having to change anything in your code


Unrelated to this particular question, but for anyone in this situation using jQuery...This error is also caused if you try to make a JSONP request using jQuery and omit the magic callback parameter: callback=?


If you are from a java background one possible solution could be to make a servlet which calls the Web-services for your javascript. something like the below code in the GET(Your-choice) method...

JsonElement jelement;
    JsonArray jarray;
    try {
        URL url = new URL("http://rest."YOUR URL"#ba0482");
        URLConnection connection = url.openConnection();
        connection.setDoInput(true);
        InputStream inStream = connection.getInputStream();
        BufferedReader input = new BufferedReader(new InputStreamReader(inStream));

        jelement = new JsonParser().parse(input);

        jarray = jelement.getAsJsonArray();

        response.setContentType("application/json");
        PrintWriter out = response.getWriter();
        out.print(jarray);
        out.flush();
    } catch (FileNotFoundException e) {
        e.printStackTrace();
    } catch (IOException e) {
        e.printStackTrace();
    }
}

Now in the javascript simply specify the url as the servlet name!!


I run into the same error message, when using ajax to access a php page (javascript and php file are both located on same server).

The reason was that I specified the IP address as the domain in my JavaScript. This made the Browser believe that the call to the php file is on another server.

So an easy solution to get rid off this error message. a) verify javascript and php file are on the same server b) make sure the url (in particular the domain) in your JavaScript (e.g. http://www.smartana.co.uk/myJavaScript.js) ajax reflects your server url (e.g. http://www.smartana.co.uk/myServer.php).

참고URL : https://stackoverflow.com/questions/9310112/why-am-i-seeing-an-origin-is-not-allowed-by-access-control-allow-origin-error

반응형