Parsing the feed : (CORS 에러 : XHTMLHttpRequest cannot load ... by Access-Control-Allow-Headers)

문제점

다음과 같이 ajax로 다른 페이지에 접급하려할 때 에러가 발생하였다.

source

$.ajax(
 {
  type: "GET",
  contentType: 'text/xml',
  dataType: "xml",
  url: 'url address',
  timeout: 4000,
  async: false,
  success: parseXml,
 });

error message

XMLHttpRequest cannot load http://xx.xx.xx.xx/xxx. Request header field Content-Type is not allowed by Access-Control-Allow-Headers. 

원인은 ajax로 외부 서버에 접속하려 할 경우에 보안상의 문제 때문이라고 한다. 해결방법에는 여러가지가 있다.

해결방안

이것저것 며칠을 찾아보면서 찾은 각종 해결방법은 아래와 같다.

1. PHP
   

   header("Access-Control-Allow-Origin: *");

2. JSP
   

   <% response.addHeader("Access-Control-Allow-Origin", "*"); %>

3. ajax
   dataType의 값을 jsonp로 변경한다.

   $.ajax(
    {
     type: "GET",
     contentType: 'text/xml',
     dataType: "jsonp",
     url: 'url address',
     //timeout: 4000,
     async: false,
     success: parseXml,
    });

4. open source
   homepage, github
5. With jQuery and the Google AJAX Feed API
   

   $.ajax({
     url      : document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(FEED_URL),
     dataType : 'json',
     success  : function (data) {
       if (data.responseData.feed && data.responseData.feed.entries) {
         $.each(data.responseData.feed.entries, function (i, e) {
           console.log("------------------------");
           console.log("title      : " + e.title);
           console.log("author     : " + e.author);
           console.log("description: " + e.description);
         });
       }
     }
   });