Angular+Node.js集成Shopify授权时遭遇CORS策略错误求助

错误原因分析 #

你遇到的CORS错误本质不是前端（localhost:4200）和后端（localhost:3000）之间的跨域问题，而是：

• 前端用AJAX请求后端的/api/shopify/auth接口
• 后端调用shopify.auth.begin()后，会直接返回重定向响应（3xx状态码）指向Shopify的授权页面
• 前端的AJAX会自动跟进这个重定向，直接请求Shopify的域名，但Shopify服务器不会给localhost:4200配置Access-Control-Allow-Origin头，因此触发CORS拦截

后端的CORS配置只针对前端和后端之间的请求，管不到前端AJAX跟进重定向到第三方域名的场景。

解决方案 #

方案1：前端改用页面跳转（推荐，符合Shopify授权流程设计） #

不要用AJAX发起授权请求，而是让前端直接跳转到后端的授权接口：

• Angular前端按钮点击事件修改：

// Angular组件代码
generateToken() {
  // 直接跳转到后端授权接口，而非AJAX请求
  window.location.href = 'https://localhost:3000/api/shopify/auth';
}

• 后端代码无需修改，shopify.auth.begin()的重定向会由浏览器正常处理，页面跳转不受CORS策略限制。

方案2：后端返回授权URL，前端自行跳转（适合需要保留前端状态的场景） #

如果必须保留前端页面状态，不想整页跳转，可以修改后端接口，生成Shopify授权URL后返回给前端，由前端触发跳转：

• 修改Node.js后端auth接口：

async auth(_req, _res) {
  const shopify = await shopifyObject.getShopifyObject();
  const shop = shopify.utils.sanitizeShop('contosostore.myshopify.com', true);
  
  // 生成Shopify授权URL，而非直接重定向
  const authUrl = await shopify.auth.getAuthUrl({
    shop,
    callbackPath: process.env.SHOPIFY_REDIRECT_URL,
    isOnline: false,
  });
  
  // 返回授权URL给前端
  _res.json({ authUrl });
}

• Angular前端处理响应后跳转：

// Angular组件代码
import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

generateToken() {
  this.http.get('https://localhost:3000/api/shopify/auth')
    .subscribe((response: any) => {
      window.location.href = response.authUrl;
    });
}

验证要点 #

• 确保Shopify应用后台的重定向URL配置正确，和callbackPath参数一致
• 后端的CORS配置保持现有即可，方案1中无需AJAX请求，方案2中前端和后端的请求是合法跨域

内容的提问来源于stack exchange，提问作者Rohan Ahmed