vue|vue axios跨域处理 vueaxios跨域处理

一、直接使用axios时 1、在main.js中：

import axios from 'axios' Vue.prototype.$axios = axios; // 在模板中可直接使用this.$axios进行接口调用 axios.defaults.baseURL = '/api'

2、模板文件中的method中

methods: { //获取用户列表 getUsers() { this.$axios.get("/user/listpage").then((res)=>{ this.total = res.data.total; this.users = res.data.users; }) }

3、配置文件（config/index.js）

#dev中的proxyTable的值： proxyTable: { '/api': {#匹配/api的path，因为main中baseUrl是/api target: 'http://127.0.0.1:5000/', # 服务端 changeOrigin: true,//跨域配置 pathRewrite: { '^/api': '' #前端发请求匹配到的api替换成空，如上例：前端将请求“http://127.0.0.1:5000/api/user/listpage”,但真实请求是“http://127.0.0.1:5000/user/listpage” } }

二、封装axios时 1、api目录下封装axios到api.js

import axios from 'axios'; let base = '/api'; export const getUserListPage = params => { return axios.get(`${base}/user/listpage`, { params: params }); }; # 可以把所有服务端接口封装到该文件下，都是按照export的格式 # export const requestLogin = params => { return axios.post(`${base}/login`, params).then(res => res.data); }; # export const removeUser = params => { return axios.get(`${base}/user/remove`, { params: params }); };

2、export封装好的api，在api目录下的index.js文件

import * as api from './api'; # 上面封装的所有服务端接口的导入 export default api; # export让别人使用

3、模板中的method

import { getUserListPage } from '../../api/api'; # 引入封装好的api模块 methods: { //获取用户列表 getUsers() { let para = { // 请求参数 page: this.page, name: this.filters.name }; this.listLoading = true; getUserListPage(para).then((res) => { #调用封装的该方法 this.total = res.data.total; this.users = res.data.users; this.listLoading = false; //NProgress.done(); }); }

【vue|vue axios跨域处理】4、跨域配置，依旧在config/index，同上