nuxt useFetch 怎么才能和axios的withCredentials一样携带cookies？

在 Nuxt.js 中，`useFetch` 是一个基于 `axios` 的轻量级库，它简化了 API 请求的操作。如果你想要让 `useFetch` 跟随浏览器的同源策略，并像 `axios.withCredentials` 那样携带 cookies，你可以通过设置请求头的方式实现。

首先，确保你在项目的 `plugins` 目录下创建一个名为 `credentials.js` 或类似的文件，然后添加如下内容：

export default ({ app }) => {
  app.fetchOptions = {
    credentials: 'include', // 设置默认情况下都带上 cookie
  };
};

这会将 `credentials` 属性设为 `'include'`，使得每个从 `useFetch` 发出的请求都会带上浏览器已有的 cookies。

如果需要针对特定的 fetch 函数进行更细粒度的控制，你可以在调用时显式地传递选项：

import { useFetch } from '@nuxtjs/composition-api';

async function fetchData(url) {
  const response = await useFetch(url, { credentials: 'include' });
  //...
}

在这个例子中，`fetchData` 函数会携带 cookies 进行请求。

相关问题

@nuxtjs/axios和axios区别

@nuxtjs/axios是基于axios封装的适用于Nuxt.js框架的插件，用于在服务端和客户端都能使用的请求库。它提供了更简单的API调用方式，以及在Nuxt.js中所需的一些特殊功能。

首先，@nuxtjs/axios提供了Nuxt.js特定的配置选项，可以在nuxt.config.js文件中进行配置。这些选项包括baseURL、browserBaseURL、proxy和headers等，方便我们在服务端和客户端之间共享统一的配置。

其次，@nuxtjs/axios能够在Nuxt.js框架中自动处理服务端渲染(SSR)时的请求。在服务端渲染期间，它会自动将请求转发到服务端，并将响应结果合并到HTML中返回给客户端，从而提高了页面的加载速度和更好的SEO表现。

此外，@nuxtjs/axios还提供了一些针对Nuxt.js框架特性的扩展功能，比如可以在middleware中使用的$axios对象、全局的$axios对象、错误处理、请求拦截器和响应拦截器等，使我们能够更方便地处理请求和响应。

总结起来，@nuxtjs/axios是基于axios进行封装的用于Nuxt.js框架的插件，提供了更简单的API调用方式和一些特殊的功能，使我们能够更方便地在Nuxt.js项目中进行服务端和客户端的请求处理。

nuxt中 this.$axios.

在 Nuxt.js 中，`this.$axios` 是一个现成的服务，它基于 Axios 实现，让你能够在 Vue 组件中方便地发送 HTTP 请求。它是 Nuxt.js 官方推荐用于处理 API 调用的标准方式。通过 `this.$axios`，你可以执行 GET、POST、PUT、DELETE 等操作，并且它的返回值是一个 Promise 对象，可以链式调用 `.then()` 和 `.catch()` 来处理异步响应。

例如，发送一个 GET 请求到 `/api/users` 的示例代码如下：

async mounted() {
  try {
    const response = await this.$axios.get('/api/users');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

在这里，`mounted()` 生命周期钩子会在组件挂载后自动运行，然后使用 `await` 关键字等待请求完成并获取响应数据。