首先已经在项目中引入了axios,并将其封装了
import axios from 'axios'
import {getUser} from "@/utils/auth";
//创建axios实例
const service = axios.create({
baseURL: 'http://192.168.238:9012',//api的base_url
timeout: 30000, //请求超时
headers: {'Authorization': 'Bearer ' + getUser().token},
})
export default service
但在局域网内可以获取到前端页面,但拿取不到后台的数据。
百度了一下,在一篇简书上看到是跨域问题,像之前的vue项目可以在config/index.js,在proxyTable中添加api地址可代理解决:
proxyTable: {
'/api': {
target: ' http://192.168.238:9012 ',
}
}
在nuxt项目中同样需要修改nuxt.config.js配置文件。
首先,需要下载代理插件@nuxtjs/axios:
npm/cnpm install @nuxtjs/axios --save
然后在nuxt.config.js文件里面添加以下代码:
module.exports={
modules: [
'@nuxtjs/axios'
],
axios: {
proxy: true
},
proxy: {
'/api': 'http://192.168.238:9012'
}
}
问题解决!
需要注意的是:
axios访问后台接口中的地址必须为主机的真实ip地址,不能使用127.0.0.1或者localhost。(在此之前我已经修改过)