如何在 JavaScript 异步获取中实现 WordPress 应用程序密码身份验证？

发布于 2025-01-12 18:40:50 字数 877 浏览 1 评论 0原文

我正在尝试使用内置的 REST API，使用 WordPress 作为 Headless CMS 设置一个网站。使用 NuxtJS 获取数据。现在我想限制 API 访问，因此我启用/创建了 WordPress 应用程序密码身份验证。

但是，我似乎无法找到有关如何将 URL 与身份验证参数组装在一起以从 API 端点获取数据的详细信息。

必须将凭据添加到正在获取的 URL 中？

async asyncData ({ $config: { apiUrl, apiUser, apiPassword } }) {
    try {
        const products = await (await fetch(`${apiUrl}/producten`)).json()

        return {
            products
        }
    }
    catch (error) {
        console.log(error)
    }
},

apiUrl、apiUser、apiPassword 目前位于 nuxtjs.config.js 的 publicRuntimeConfig 下。但是 1）它们应该出现在 privateRuntimeConfig 中吗？

2) 得到以下结果（这是来自 WP Rest API 的正确响应，因为我需要以某种方式在某处传递身份验证凭据......）

{ "code": "rest_not_logged_in", "message": "您当前尚未登录。", "data": { "status": 401 } }

原文

I'm trying to setup a web site using WordPress as Headless CMS, using the built-in REST API. Using NuxtJS to fetch the data. Now I want to restrict API access so I enabled/created WordPress Application Password Authentication.

However, I can not seem to find detailed information on how the URL should be assembled with authentication parameters to fetch data from API endpoint.

Credentials have to be added to the URL that's being fetched?

async asyncData ({ $config: { apiUrl, apiUser, apiPassword } }) {
    try {
        const products = await (await fetch(`${apiUrl}/producten`)).json()

        return {
            products
        }
    }
    catch (error) {
        console.log(error)
    }
},

apiUrl, apiUser, apiPassword are currently in nuxtjs.config.js, under publicRuntimeConfig. But 1) they should come in privateRuntimeConfig?

And 2) getting following as return (which is the correct response from the WP Rest API, because I need to pass auth-credentials somewhere, somehow...)

{ "code": "rest_not_logged_in", "message": "You are not currently logged in.", "data": { "status": 401 } }

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

久隐师 2025-01-19 18:40:50

通过在fetch中添加options解决；

const fetchHeaderOptions = {
  cache: 'no-cache',
  method: 'GET',
  credentials: 'omit', //To instead ensure browsers don't include credentials in the request
  mode: 'no-cors',
  headers: {
    'Authorization': 'Basic ' + encode(`${apiUser}` + ":" + `${apiPassword}`),
    'Content-Type': 'application/json; charset=UTF-8; application/x-www-form-urlencoded',
  },
}

const products = await (await fetch(`${apiUrl}/products`, fetchHeaderOptions)).json()

Solved by adding options to fetch;

const fetchHeaderOptions = {
  cache: 'no-cache',
  method: 'GET',
  credentials: 'omit', //To instead ensure browsers don't include credentials in the request
  mode: 'no-cors',
  headers: {
    'Authorization': 'Basic ' + encode(`${apiUser}` + ":" + `${apiPassword}`),
    'Content-Type': 'application/json; charset=UTF-8; application/x-www-form-urlencoded',
  },
}

const products = await (await fetch(`${apiUrl}/products`, fetchHeaderOptions)).json()

回复收藏 0 原文

~没有更多了~