nuxt使用@nuxtjs/axios插件实现前后端数据交互

六月初六月初 Vue 2023-08-01 20:30:23

对于任何一个网站来说，数据请求都是必不可少的存在。因为有数据交互的存在，才构成了网站的可持续性。

由此可见，对于网站的数据交互对于任意一个网站来说都异常重要。

那么在nuxt项目我们要如何实现和后端数据的交互请求呢？

这里就需要了解@nuxtjs/axios。

一、安装@nuxtjs/axios

  1. //npm方式安装
  2. npm i @nuxtjs/axios 
  3. //yarn方式安装
  4. yarn add @nuxtjs/axios
Collapse Code

二、nuxt.config.js配置文件中的处理

  1. modules: [
  2.     '@nuxtjs/axios'
  3. ],
  4. axios: {
  5.   // 开启代理 (如果需要判断线上线下环境，可以通过 process.env.NODE_ENV !== 'production' 来判断)
  6.   proxy: true,
  7.   prefix: '/api',
  8.   // 跨域请求时是否需要使用凭证
  9.   credentials: true
  10. },
  11. proxy: {
  12.   '/api': {
  13.     // 目标接口域
  14.     target: 'http://tt.tool.tt',
  15.     // 全局配置是否跨域
  16.     changeOrigin: true,
  17.     pathRewrite: {
  18.       '^/api': '/'
  19.     }
  20.   }
  21. },
Collapse Code

三、页面中使用axios

  1. mounted() {
  2.   this.$axios.get("/t/a").then(res=>{
  3.       console.log(res)
  4.   })
  5. }
  6. //该路径的完整请求接口为http://域名/t/a
Collapse Code

如上配置为开启了代理及跨域操作，通过该操作后即可在页面中正常使用axios请求数据。

铁子们，抗不住了。点点广告可好，感谢您的支持。
六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！