如何调用 express 以触发外部重定向并避免 COR

我正在尝试通过ajax调用从前端触发快速.js路由。调用路由后，它会重定向到外部重定向到另一个域。每次运行此路由时，都会遇到 COR 预检错误。

我想理想的工作流程应该是这样的：

用户单击订阅按钮。
AJAX (Jquery) 调用被发送到快速路由 (app.get('/shopify/new-charge'))。
快速路线运行。
触发外部重定向，并将用户发送到其他域。

通过我的研究，我认为问题在于响应从后端返回到前端。

我尝试实现以下内容：

修改 AJAX 调用
服务器中的 npm CORS.js
将标头添加到服务器.js
向 AJAX 添加标头
将标头添加到重定向
向重定向添加状态 ( res.redirect(301， 'https://external-url.com' )
在 res.redirect() 之后添加 next()
和起点与路线一起列入白名单

但是，我成功地解决了这个冲突，用一个表单包装我的按钮，并消除了 AJAX 调用，但我想知道这是否可以通过前端的 AJAX 调用来实现。

前端阿贾克斯调用

activateSubscriptionButton.addEventListener('click', function () {

var newChargeUrl = "/shopify/new-charge;

$.ajax({
type: "GET",
url: newChargeUrl,
data: {"shop" : test.com},
success: function (result) {
console.log('Success - Paid');
},
error: function (jqXHR, exception) {
console.log('Error - No Paid');
console.log('jqXHR :', jqXHR);
},
});

}, false);

快.js路线

app.get("/shopify/new-charge", function (req, res, next) {
const shop_domain = req.query.shop;
const shopRequestUrl = 'https://' + shop_domain + '/admin/api/2019-04/recurring_application_charges.json';
const newCharge = {
"recurring_application_charge": {
"name": "Professional Plan",//
"price": 4.99,
"return_url": forwardingAddress + "/shopify/billing/activate?shop=" + encodeURIComponent(shop_domain),
"test": true,
}
};
request.post(shopRequestUrl,
{
headers: {
'X-Shopify-Access-Token': access_token,
},
json: newCharge
}, function (error, response, body) {
if (error) {
console.error('Error has occurred with charge: ', error);
return
}
else {
// Redirect User To External Confirmation Page//
res.redirect('https://external-url.com/');
}
})   
else {
res.send('Error: No shop_domain.');
}
});

服务器.js

var express = require("express");
var app = express();
var bodyParser = require("body-parser");
const forwardingAddress = process.env.ngrok_forwarding_address;
app.use(express.static("public"));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(bodyParser.text());
require("./controllers/shopify")(app);
require("./controllers/billing")(app);
// Setting up port and requiring models for syncing
var PORT = process.env.PORT || 3000;
app.listen(PORT, function () {
console.log("Server listening on: http://localhost:" + PORT);
});

以下是我在运行上述代码时收到的错误：

选项：https://external-url.com 404

CORS 策略阻止了从源"https://local.ngrok.com"访问"https://external-url.com"处的 XMLHttpRequest(从"https://local.ngrok.com/shopify/new-charge?shop=test.com"重定向)：对预检请求的响应未通过访问控制检查：请求的资源上不存在"访问控制Allow_Origin"标头。

有没有办法通过修改上面介绍的现有代码来实现我的目标？

你真的错过了一个基本功能 Shopify 在这里。关于您的应用程序，请在您的合作伙伴帐户中进入您的应用程序设置，然后为该应用程序创建一个应用程序代理调用。然后，您创建的端点是您使用 JS 代码从前端调用的端点。Shopify 确保安全性，并且您的所有CORS问题都会消失。这就是应用代理存在的原因，以允许安全地对后端应用进行前端调用。

TL：DR;你的前端模式注定要失败，你应该重新分解以使用安全的应用代理。

相关内容

最新更新

热门标签：