Shopify API 跨域 Ajax 请求

Posted 2023-02-27

【中文标题】Shopify API 跨域 Ajax 请求

【英文标题】：Shopify API Cross Domain Ajax Request

【发布时间】：2018-03-07 05:59:24

【问题描述】：

我正在使用以下代码从 shopify 获取客户详细信息。我已将我的域从 shopify 管理员重定向到另一个域。

function setEmailWithLoggedInUser(callback) 
$.ajax(
      url: 'https://new-website-shopify.myshopify.com/admin/customers/'+__st.cid+'.json',
      crossDomain: true,
      beforeSend: function(xhr) 
           xhr.setRequestHeader("Authorization", "Basic XXXXXXXXXXXX")
      , success: function(data)

          console.log(data);

          if(callback)
            callback();      
         
)  

我已经做了很多工作，但无法找到解决方案。 我收到此错误：

加载资源失败：服务器响应状态为 404 （未找到）

XMLHttpRequest 无法加载 https://new-website-shopify.myshopify.com/admin/customers/7094124372.json。 对预检请求的响应未通过访问控制检查：

请求中没有“Access-Control-Allow-Origin”标头 资源。原点 'https://www.beirutshopping.com' 因此不是 允许访问。响应的 HTTP 状态代码为 404。

【问题讨论】：

“服务器响应状态为 404（未找到）” 是根本问题。您看到“请求的资源上没有'Access-Control-Allow-Origin'标头。”的唯一原因是大多数服务器没有添加像Access-Control-Allow这样的标头-Origin 标头到 4xx 错误响应——相反，服务器通常只将这些标头添加到 2xx 成功响应中。如果您将https://new-website-shopify.myshopify.com/admin/customers/7094124372.json URL（无论真实主机名是什么）粘贴到浏览器地址栏中，会发生什么？

如果我在浏览器中粘贴带有真实主机名的“new-website-shopify.myshopify.com/admin/customers/70‌​94124372.json”，它会重定向回相同的域名，它会要求提供 api 凭据，然后显示响应正确。

你控制https://new-website-shopify.myshopify.com/admin/customers/？您可以对其进行配置更改吗？它运行什么服务器后端？您在这里遇到的问题似乎与***.com/questions/45557941/… 的答案中解释的相同。另请参阅***.com/questions/43871637/… 答案的如何避免 CORS 预检部分，了解一些可能的解决方法。

是的。我尝试了这些，但我没有找到适合我的情况的解决方案。我无法对其进行配置更改。这里的 url 是从 shopify 创建的。

如果您无法对该服务器进行配置更改，并且需要使用 Authorization 标头进行身份验证（包括用于 OPTIONS 请求），那么您将永远无法进行直接从浏览器中运行的前端 javascript 代码向它发出请求。没有什么魔法可以让这成为可能。相反，您需要从后端代码发出请求，并在那里处理响应。

【参考方案1】：

我会用这个答案为您省去一些麻烦。您不能从商店的前端调用 /admin，因为这会将您的访问令牌暴露给公众。相反，如果您想从前端访问 API，请使用 App Proxy 模式，允许您安全地进行 Ajax 调用以实现您的目标。

事实上，您几乎肯定会失败，而您获得的任何成功都会很快让您的商店陷入困境。就像被悲伤的熊猫取代，或者以其他方式被淘汰。

【参考方案2】：

var cors = require('cors');
router.use(cors(
    origin: '*'
)); 
//var config = require('../config/config.json'); 
//testing /* GET home page. */ 
router.get('/', function (req, res, next) 
    res.setHeader("Content-Type", "application/liquid");
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.render('index', 
        title: 'Store Locator'
    );
);

【讨论】：

感谢您提供此代码 sn-p，它可能会提供一些有限的即时帮助。 proper explanation would greatly improve its long-term value 通过展示为什么这是一个很好的解决问题的方法，并将使其对未来有其他类似问题的读者更有用。请edit您的回答添加一些解释，包括您所做的假设。