一、利用axios调用后端接口,并配置devServer.proxy实现跨域显示数据
前提条件:
1、axios已安装(npm install axios);
2、网上找一个公开的api(以下api我用的项目里的 api:http://elm.cangdu.org/statis/api/all);
3、vue版本vue@2.7.13(npm list vue);
4、项目不在运行的情况下
步骤:
主要关联src/api/request.js、vue.config.js、随便一个.vue页面这三个文件
1、在src下创建api文件夹,创建request.js文件
添加代码
/* eslint-disable*/
import axios from 'axios'
axios.defaults.timeout = 5000 // 超时时间设置
axios.defaults.withCredentials = true // 是否跨域
axios.defaults.baseURL = '/url' // 域名或ip 【注意/url和后面的vue.config.js的/url相匹配】
// Content-Type 响应头
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8";
// 先简单弄下小例子 /statis/api/all 获取所有api请求信息
export const getAllData = params => {
return axios.get(`/statis/api/all`, { params: params })
}
2、找到根目录里的vue.config.js,配置代理服务器,添加代码
devServer: {
proxy: {
'/url': { // /url 表示拦截以/url开头的请求路径 【与request.js的url字段要一致】
target: 'http://elm.cangdu.org', // http://域名或ip
changeOrigin: true, // 是否开启跨域
pathRewrite: { // 重写路径
'^/url': '' // 把/url变成空字串
}
}
}
}
3、在其中一个.vue页面,添加点击事件
<template>
<div class="home">
<button @click="getAllData">调用</button>
</div>
</template>
<script>
/* eslint-disable*/
import { getAllData } from '@/api/request'
export default {
name: 'HomeView',
methods: {
getAllData () {
getAllData().then((res) => {
console.log(res)
})
}
},
}
</script>
4、npm run serve 运行,点击按钮,看下有没有问题
取到数据了,实现跨域了
二、proxy代理后出现404问题
问题现象:
问题原因:主要原因是改了 devServer.proxy里的target的值,没有关闭重新运行
解决方案:所以一定要注意,如果在做跨域操作之前项目是在运行中的话,一定做完操作后在命令窗口ctrl+c关闭项目,再重新运行npm run serve