云起工作室 15711107967
06数据交互、跨域
2025-02-06 10:44:53
1、安装axios 和 proxy

npm i @nuxtjs/axios @nuxtjs/proxy

npm i  cookie-universal-nuxt --save




配置nuxt.config.js

modules:[

	'@nuxtjs/axios',

	'@nuxtjs/proxy',

	'cookie-universal-nuxt'

],

axios:{

	proxy:true,

	prefix:"/api"

},

proxy:{

	"/api/":{

		target:"http://localhost:8080",

		changeOrigin:true,

		pathRewrite:{

			//'^/api':''  替换路径中的内容

		}

	}

}




使用

export default {

	async asyncData({$axios}){

		let res = await $axios({url:""})

		return res;  数据会合并到 data里

	},

	async fetch({$axios}){

		将数据同步到store

	}

	

}




拦截器配置 token携带

nuxt.config.js

plugins:[

	{

		src:"~/plugins/axios",

		ssr:true

	}

]




plugins/axios.js

export default function({$axios,redirect,route,store}){

	//基本配置

	$axios.defaults.timeout=10000;

	//请求拦截

	$axios.onRequest(config=>{

		//设置config

		config.headers.token=""

        // config.headers.ContentType= 'application/json;charset=UTF-8'  如果开启此设置,gin即时设置了允许跨域,也会产生跨域问题
		return config

	})

	//相应拦截

	$axios.onResponse(res=>{

		return res;

	})

	//错误拦截

    $axios.onError(error=>{
     return error.response;
      
   })
}