cli axios请求方式及跨域处理问题

vue-cli axios请求方式以及跨域处理

安装axios

cnpm install axios --save

在要使用axios的文件中引入axios

main.js文件 :import axios from 'axois' 要发送请求的文件:import axios from 'axois'

在config/index.js文件设置代理

dev: { proxyTable: {// 输入/api 让其去访问:3000/api '/api':{ target:'http://localhost:3000'//设置调用的接口域名和端口号 ( 设置代理目标) }, '/api/*':{ target:'http://localhost:3000' }, changeOrigin: true, pathRewrite: { //路径重写 '^/api': 'https://www.jb51.net/' //这里理解成用‘/api'代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://localhost:3002/user/add',直接写‘/api/goods/add'即可 } }

试一下,跨域成功,但是这知识开发环境(dev)中解决了跨域问题,生产环境中正真部署到服务器上如果是非同源还是存在跨域问题。

axios请求方式

Get请求

// 向具有指定id的用户发出请求 axios.get('/user?id=1001') .then(function (response) { console.log(response.data); }).catch(function (error) { console.log(error); }); // 也可以通过 params 对象传递参数 axios.get('/user', { params: { id: 1001 } }).then(function (response) {//请求成功回调函数 console.log(response); }).catch(function (error) {//请求失败时的回调函数 console.log(error); });

post请求

axios.post('/user', { userId: '10001' //注意post请求发送参数的方式和get请求方式是有区别的 }).then(function (response) { console.log(response); }).catch(function (error) { console.log(error); });

补充:

vue中axios解决跨域问题和拦截器使用

1.vue中axios不支持vue.use()方式声明使用。 所以有两种方法可以解决这点:

第一种: 在main.js中引入axios,然后将其设置为vue原型链上的属性,这样在组件中就可以直接 this.axios使用了

import axios from 'axios'; Vue.prototype.axios=axios; components: this.axios({ url:"a.xxx", method:'post', data:{ id:3, name:'jack' } }) .then(function(res){ console.log(res); }) .catch(function(err){ console.log(err); }) }

这里需要注意一点,就是在axios中把请求到的数据 使用this复制给data是无效的,使用箭头函数可以解决。

1.vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口 14:57:22',是要跨域的才可以访问的,如果直接访问会报 XMLHTTPRequest can not load 14:57:22'. Response to preflight request doesn't pass access control….

为什么存在跨域问题?因为这是非同源互相通讯,具体可以自己去google了解,这里只需要在webpack配置一下proxyTable就OK了,在config中找到index.js如下 :

config/index.js dev: { proxyTable: { '/api': { target: 'http://10.1.5.11:8080/',//设置你调用的接口域名和端口号 changeOrigin: true, //跨域 pathRewrite: { '^/api': 'https://www.jb51.net/' //这里理解成用‘/api'代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://10.1.5.11:8080/xxx/duty?time=2017-07-07 14:57:22',直接写‘/api/xxx/duty?time=2017-07-07 14:57:22'即可 } }

跨域成功,但是这只是开发环境(dev)中解决了跨域问题,生产环境中真正部署到服务器上如果是非同源还是存在跨域问题,如我们部署的服务器端口是3001,需要前后端联调,第一步前端我们可以分生产production和开发development两种环境分别测试,在config/dev.env.js和prod.env.js里也就是开发/生产环境下分别配置一下请求的地址API_HOST,开发环境中我们用上面配置的代理地址api,生产环境下用正常的接口地址,所以这样配置,分别在config/dev.env.js和prod.env.js两个文件中进行以下配置。

config/dev.env.js: module.exports = merge(prodEnv, { NODE_ENV: '"development"',//开发环境 API_HOST:"/api/" }) prod.env.js module.exports = { NODE_ENV: '"production"',//生产环境 API_HOST:'"http://10.1.5.11:8080/"' }

当然不管是开发还是生产环境都可以直接请求:8080//。配置好之后测试时程序会自动判断当前是开发还是生产环境,然后自动匹配API_HOST,我们在任何组件里都能用process.env.API_HOST来使用地址如:

instance.post(process.env.API_HOST+'user/login', this.form)

然后第二步后端服务器配置一下cros跨域即可,就是access-control-allow-origin:*允许所有访问的意思。综上:开发的环境下我们前端可以自己配置个proxy代理就能跨域了,真正的生产环境下还需要后端的配合的。某大神说:此方法ie9及以下不好使,如果需要兼容,最好的办法是后端在服务器端口加个代理,效果类似开发时webpack的代理。

1.axios发送get post请求问题

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/pxdgj.html