Greasemonkey는 웹 페이지의 특정 데이터를 데이터베이스에 저장하기 위해 액세스 오류가 있습니까?

Question

Greasemonkey를 사용하여 포토 갤러리 사이트의 사용 편의성을 확장하려고합니다.
사이트에는 각 사진 갤러리에 대한 축소판이 있으며 축소판을 클릭하면 자신의 갤러리 페이지가 열립니다.

문제는 웹 사이트가 갤러리를 자주 업데이트한다는 것이며 내가 본 마지막 갤러리를 잊어 버렸습니다 (새 갤러리는 이전 갤러리를 다음 페이지로 이동시킵니다). 웹 사이트에서 내가 방문한 갤러리를 기억하고 다른 테두리 색상으로 보여주기를 바랍니다.

jQuery를 사용하여 클릭 이벤트에서 스타일을 변경하는 것은 매우 쉽지만 방문한 갤러리 ID를 내 로컬 데이터베이스에 저장하여 다음에 페이지를로드 할 때 해당 스타일을 읽고 스타일을 변경하려고합니다.

$(".user_gallery").each(function() { 
    $(this).click(function() { 
     $("p", this).attr("style", "background-color:yellow"); 

     $.ajax({ 
      type: "POST", 
      dataType: "json", 
      contentType: "application/json", 
      url: "http://localhost:58364/SaveData.aspx/SaveUserGallery", 
      data: "{'galleryID': '" + $("p", this).text() + "'}", 
      success: function (data) { 
       alert("true!"); 
      }, 
      error: function() { 
       alert("Error calling the web service."); 
      } 
     }); 
    }); 
}); 

그러나 물론이 나에게주는 크로스 도메인 오류 : 여기

내 포스트 코드

XMLHttpRequest를로드 할 수 없습니다 .... 원래 ... 액세스에 의해 허용되지 않습니다 -Control-Allow-Origin.

내 서버 측 코드는 로컬 서버에서 실행되는 .net 웹 메소드이며 galleryID를 내 SQL 서버 db에 저장합니다. 저는 그 사진 갤러리 사이트의 회원이며 다른 도메인에서 운영됩니다.

저는 전문가 웹이나 JS 프로그래머가 아니기 때문에이 문제를 해결하는 방법을 모르겠습니다. 어떻게해야합니까?

Answer 1

이 문제를 해결하는 방법에는 두 가지가 있습니다. 가장 쉬운 방법은 자신의 서버를 제어하는 ​​것이므로 로컬 서버에 Cross-origin resource sharing (CORS) 헤더를 설정하는 것입니다. "I want to add CORS support to my server"을 참조하십시오.

그러나이 작업을 원하지 않는 경우 또는 서버를 제어하지 않는 경우 Greasemonkey는 도메인 간 AJAX를 the GM_xmlhttpRequest() function으로 처리합니다.

변경과 같은 스크립트를

// ==UserScript== 
// @name  _YOUR_SCRIPT_NAME 
// @include http://YOUR_SERVER.COM/YOUR_PATH/* 
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js 
// @grant GM_xmlhttpRequest 
// ==/UserScript== 

$(".user_gallery").each (function() { 
    $(this).click (function() { 
     $("p", this).attr ("style", "background-color:yellow"); 

     GM_xmlhttpRequest ({ 
      method:  "POST", 
      url:  "http://localhost:58364/SaveData.aspx/SaveUserGallery", 
      data:  "{'galleryID': '" + $("p", this).text() + "'}", 
      headers: {"Content-Type": "application/json"}, 
      onload:  function (response) { 
          alert ("true!"); 
         }, 
      onerror: function() { 
          alert ("Error calling the web service."); 
         } 
     }); 
    }); 
}); 

내가 그렇게, .each() 내부하는 bazillion 서로 다른 익명 함수를 작성하지 않는 것이 좋습니다 있지만. (다른 질문에 대한 주제입니다.)