Shopify에서 사용자 지정 제품 만들기

Question

Shopify Storefront으로 사용자 지정 제품을 만들어야합니다.

문서 링크 : 나는 다음 코드를 시도 http://docs.shopify.com/api/product#create

는 :

$('#addProduct').click(function() { 
     $.ajax({ 
      url:'https://xxxxxx:yyyyyyyyyy@rmisys.myshopify.com/admin/products.json', 
      type: 'POST', 
      contentType : 'application/json', 
      dataType: 'json', 
      data: { 
        "product": { 
        "title": "Burton Custom Freestlye 151", 
        "body_html": "<strong>Good snowboard!</strong>", 
        "vendor": "Burton", 
        "product_type": "Snowboard", 
        "tags": "Barnes & Noble, John's Fav, \"Big Air\"" 
        } 
       }, 
      success: function(response) { 
       console.log(response); 
      }, 
      error: function(xhr) { 
       console.log(xhr.statusText); 
      } 
     }).done(function(data) { 
      console.log(data); 
     }); 
    }); 

위의 코드는 크롬 콘솔에서 다음과 같은 오류를 보여줍니다 아약스 요청 동안 :

옵션 https://rmisys.myshopify.com/admin/products.json (405) (허용되지 않음) jquery-1.10.2.js : 8706 옵션 https://rmisys.myshopify.com/admin/products.json 'Access-Control-Allow-Origin'헤더가 없습니다. o n 요청 된 자원. 따라서 원점 'http://rmisys.myshopify.com'은 액세스 할 수 없습니다. jquery-1.10.2.js : 8706 XMLHttpRequest는 https://rmisys.myshopify.com/admin/products.json을로드 할 수 없습니다. 'Access-Control-Allow-Origin'헤더가 요청 된 리소스에 없습니다. 따라서 원점 'http://rmisys.myshopify.com'은 액세스 할 수 없습니다. 디자인 - 셔츠 - 1 오류

Answer 1

오랜 시간을 검색 한 후에 해결책을 찾았습니다.

문제는 CORS (Cross-Origin Resource Sharing)입니다.

http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

이것은 CSRF 보호을 방지하기 위해 사용된다.

https://docs.djangoproject.com/en/1.4/ref/contrib/csrf/

대부분의 경우 API가 동일 기원 정책 http://en.wikipedia.org/wiki/Same-origin_policy

그래서,

우리가 "HTTP"호스트 수단에서 요청하는 경우와 요청을 수락해야합니다, 우리는 다음과 같은 오류가 발생했습니다 Shopify의 AJAX 요청 :

아니요 'Acce ss-Control-Allow-Origin '헤더가 요청 된 리소스에 있습니다.

이 솔루션은 사용자를 리디렉션하는 것입니다에 "HTTPS"그들이 "HTTP"프로토콜을 사용하여 웹 사이트에 올 때.

다음 추가 코드를 시도하고 사용자 지정 제품을 추가했습니다.

<script> 
window.onload = RedirNonHttps(); 

function RedirNonHttps() { 
    if (location.href.indexOf("https://") == -1) { 
     location.href = location.href.replace("http://", "https://"); 
    } 
} 
</script> 

참고 : 우리는 스크립트를 사용하여 클라이언트 측에서 사용자 정의 제품을 추가하면 키가 공개 한 후 사용할 수 있기 때문에 그것은 사용자가 그 API 키를 사용하여 원하는대로 할 수있는, 안전하지 않습니다. 따라서 Secure Auth를 유지 한 다음 클라이언트 측 스크립트가 Secure Auth와 상호 작용하도록하십시오.

이 답변으로 초보자를위한 CORS (Cross-Origin Resource Sharing)에 대한 아이디어를 얻길 바랍니다.

Answer 2

그냥 기억하십시오. CORS에서 이러한 사소한 문제를 파악하는 데 성공하면 API 키를 공개적으로 나와 같은 사람들에게 상점을 노출하게됩니다. 모든 리소스를 삭제할 수 있습니다. 내가 원하는대로 인벤토리를 바꿀 수 있습니다.

이와 같이 자바 스크립트를 사용할 수 없습니다. 말도 안돼. 제대로 oAuth로 인증하는 안전한 응용 프로그램을 만듭니다. 그런 다음 Javascript를 사용하여 해당 앱과 대화하십시오. 그렇지 않으면 누군가가 당신을 바보처럼 보이게 만들면서 어려움에 처하게됩니다.