使用vue-cli+axios配置代理进行跨域访问数据

因为axios中只能使用get和post方法来进行请求数据，没有提供jsonp等方法进行跨域访问数据

// axios 中的GET请求
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

// axios 中的POST请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

如果要使用axios直接进行跨域访问是不可以的，这是就需要配置代理了，为什么要配置代理呢？

原因就是因为客户端请求服务端的数据是存在跨域问题的，而服务器和服务器之间可以相互请求数据，是没有跨域的概念（如果服务器没有设置禁止跨域的权限问题），也就是说，我们可以配置一个代理的服务器可以请求另一个服务器中的数据，然后把请求出来的数据返回到我们的代理服务器中，代理服务器再返回数据给我们的客户端，这样我们就可以实现跨域访问数据啦。

如果不理解可以看依据看下图

理解了这个原理之后，我们就可以按照这个逻辑去配置了。

npm install -g vue-cli

vue init webpack axios-cross

npm install

npm install axios -D

-D

--save-dev

-S

--save

http-proxy-middleware

npm install -S http-proxy-middleware

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios' // 1、在这里引入axios

Vue.prototype.$axios = axios;   // 2、在vue中使用axios

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})

http-proxy-middleware

'use strict'
// Template version: 1.2.6
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
dev: {

// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: { // 在这里配置如下代码
'/api': {
target:'http://api.jisuapi.com/XXXXX', // 你请求的第三方接口
changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite:{  // 路径重写，
'^/api': '/api'  // 替换target中的请求地址，也就是说以后你在请求http://api.jisuapi.com/XXXXX这个地址的时候直接写成/api即可。
}
}
},

// 以下代码省略……

<template>
<div class="hello">
<h1>{{ msg }}</h1>
// 在这里把其他代码删除，添加button按钮注册一个点击事件
<button @click="jsonpData">axios跨域获取数据</button>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods:{
jsonpData: function() {
var url = '/api'; <
9d3f
span class="hljs-comment">// 这里就是刚才的config/index.js中的/api
this.$axios.get(url)
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
// 或者使用以下代码也可
/*this.$axios({
method: "get",
url: url,
data: {
name: "axios",
id: "1"
}
})
.then(function(res) {
console.log(res);
})
.catch(function(err) {
console.log(err);
});*/

}
}
}
</script>

webpack-dev-server

--open

--open

"scripts": {
"dev": "webpack-dev-server --open --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
"build": "node build/build.js"
},

npm run dev