在 Nuxt.js 中请求奇怪的行为

Posted 2023-03-04

【中文标题】在 Nuxt.js 中请求奇怪的行为

【英文标题】：Request wierd behaviour in Nuxt.js

【发布时间】：2020-03-02 20:44:34

【问题描述】：

我有一个奇怪的问题，可能是我造成的，我个人怀疑是服务器端代码，但我想看看我是否遗漏了什么，所以我的目标不是相应地更改服务器我可以这样做，但我想了解幕后发生的事情。所以我有一个 Nuxt 应用程序需要消耗 2 个 api，我决定在早期测试它是如何工作的，所以我尝试了一些最初使用 @nuxtjs/axios 模块的 axios 请求运行良好，但现在，我所看到的真的让我很困惑。

这是请求的外观：

async fetchData() 
      const data = await this.$axios.$get(
        process.env.cmBaseUrl + '/api/products',
        
          auth: 
            username: process.env.cmUsername,
            password: process.env.cmPassword
          
        
      )
      console.log(data)
    

服务器正在使用基本授权，这就是我使用 auth 属性的原因，但那是之前工作的，我还尝试从 nuxtServerInit（在存储中）、asyncData（在页面中）、普通方法和布局中调用，无济于事（正如我之前所说，它在商店和页面中都有效）。

但在这种情况下真正奇怪的是，在我运行 npm run dev 的控制台中，当我重新加载页面时，我可以看到来自该请求的响应，并且 created() 挂钩运行 fetchData()功能。

但是在浏览器控制台中，我看到网络错误并且请求停留在 OPTIONS 上（虽然它之前确实通过了，但在服务器端没有任何变化，它不应该与 CORS 相关）。

所以我主要担心的是我不明白（我知道这是我的错）为什么请求在节点环境中传递，但在浏览器中具有不同的行为，如果它确实与 CORS 相关，因为浏览器请求卡在OPTIONS 上，从来没有到达过 GET 请求，怎么会通过节点？

【参考方案1】：

据我了解，您可以在命令行中看到响应，但在浏览器中看不到，这是意料之中的。 CORS 仅发生在浏览器中。命令行、邮递员和类似的东西不是浏览器，你不会在它们中得到 CORS 错误。您需要在后端应用中设置 CORS 政策，以便能够在浏览器中获得响应。