我的shopify app代理信息:
Subpath prefix: apps
Subpath: rma
Host: https://www.example.com/shopdevc/shopifyAPI/
如果我直接使用https://www.example.com/shopdevc/shopifyAPI/apps/rma查询主机，它工作得很好。
但是，在我的React函数中，查询"/apps/rma"返回
<!DOCTYPE html> <html lang="en"> <head> <script type="module" src="/@vite/client"></script> <script type="module"> import RefreshRuntime from "/@react-refresh" RefreshRuntime.injectIntoGlobalHook(window) window.$RefreshReg$ = () => {} window.$RefreshSig$ = () => (type) => type window.__vite_plugin_react_preamble_installed__ = true </script> <meta charset="UTF-8" /> </head> <body> <div id="app"><!--app-html--></div> <script type="module" src="/src/entry-client.jsx"></script> </body> </html>
我的代理url或路径有问题吗?我的文件夹结构是
"c:wwwrootshopDevCshopifyAPIappsrmaindex.aspx"
指数。Aspx是默认的文档
我代码:
function delayed_render(async_fun, deps=[]) {
const [output, setOutput] = useState();
useEffect(async () => setOutput(await async_fun()), deps);
return (output === undefined) ? null : output;
}
function TestAPI() {
return delayed_render(async () => {
// const resp = await fetch(`https://www.example.com/shopdevc/shopifyAPI/apps/rma`); // this works fine
const resp = await fetch(`/apps/rma`); //this does not work even though our proxy is set to https://www.example.com/shopdevc/shopifyAPI
const data = await resp.text();
return <div>
<h1> Fetch data from an api in react: {data} </h1>
</div>;
我今天也一直在研究一个类似的问题。几乎就是我的搜索词Shopify proxy url not working but unproxied is working。这不是对你的问题的答案，但可能对你有所帮助，也许其他人会觉得这很有用。我想是url的解析，而不是你的react代码。
我的骨架是用shopify-cli:构建的shopify create app node.
当加载https://{shop}.myshopify.com/{proxy_prefix}/{proxy_path}/{rest-of-path}时，我在浏览器开发人员窗口中看到的是资产被请求到根目录。src="/src/entry-client.jsx"等等。这是试图加载https://{shop}.myshopify.com/src/entry-client。我的解决方案是用服务器文件server/index.js中主机的完整url替换根。下面的工作适用于dist (isProd === true)中的编译文件:
app.use("/*", (req, res, next) => {
let host = "";
let contentType = "text/html";
if (Object.keys(req.headers).includes("x-forwarded-for")) {
host = process.env.HOST; // where I actually am
contentType = "application/liquid"; // to use shop theme wrapper
};
let template = fs.readFileSync(
path.resolve(root, '/dist/client/index.html'),
'utf-8'
);
template = template.replace("/assets", `${host}/assets`); // correct url
res
.status(200)
.set("Content-Type", contentType)
.send(template);
});
对于开发服务器(!isProd部分)，需要更多的替换:
for (const part of ["/@", "/src"]) {
template = template.replace(part, `${host}${part}`)
};
然后允许字符串替换vite.createServer实例需要有middlewareMode: "ssr"(服务器端渲染)，这意味着react-refresh代码没有被注入。所以我加入了这个:
template = template.replace("<!-- react-refresh -->", `
<script type="module">
import RefreshRuntime from "${host}/@react-refresh"
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true
</script>
`);
在最后的注意-我仍然试图找出如何使套接字__vite_ping去我的HOST。
好运。
我只是绕过使用shopify代理，并在index.js中滚动我自己的:
app.use(`/a/prx/*`, async function(req, res) {
const path = req.originalUrl.split(`/`).splice(-1).toString();
var options = {
method: req.method,
headers: {
'User-Agent': req.headers[`user-agent`],
"X-User-Agent": req.headers[`user-agent`],
"Shopify-API-Key": process.env.SHOPIFY_API_KEY,
"Shopify-API-Secret": process.env.SHOPIFY_API_SECRET
}
};
const response = await fetch(`${process.env.KP_SHOPIFY_API}${path}/`, options);
const data = await response.text();
res.send(data);
});