Vue axios ajax 跨域问题 代理
最近在写项目时终于遇到了ajax 跨域问题,在网上查了许多资料,最终解决问题
原理:前后端分离的开发中,由于分开开发,前端在使用ajax时一定会遇到 ajax 跨域问题。vue-cli为了保证开发时的效率,可以使用代理的方式解决问题,但是在实际上线中如果需要跨域,还需要配置别的东西…
Axios的基本配置
首先下载安装 axios npm install axios
在main文件里引用,并且加到Vue 的原型上
import axios from 'axios'
Vue.prototype.$axios = axios
这样在组件中就可以使用axios 了
vue 跨域问题
正常情况下不跨域是这样的
this.$axios.get('/api/v1/login').then(res => {
console.log(res)
console.log(res.data.message)
}).catch(err => {
console.log(err)
})
会返回
{data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}
这是成功的。
而在跨域问题出现后,是这样的
No 'Access-Control-Allow-Origin' header is present on the requested resource
这是由于浏览器的同源政策导致的, 对 协议、域名、端口 不同的网页无法相互访问。
CORS
为了解决ajax 的跨域问题,就要用到 CORS
。
Cross-Origin Resource Sharing
, 简称 CORS
CORS是W3c工作草案,它定义了在跨域访问资源时浏览器和服务器之间如何通信。CORS背后的基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方,从而决定请求或响应成功与否
简单说, CORS
可以避开浏览器的同源政策,是官方推荐的跨域解决方案
Vue 在开发时的跨域
在前后端分离的开发模式中,前端开发的环境和后端不同,很可能出现跨域问题,而跨域问题需要前端和后端方面共同解决。
这里给出vue 的跨域解决方案。
vue在开发时,会有跨域问题,一般的解决方案就是 代理 。
这里开发用到的是 vue-cli,
首先在项目中找到config 文件夹
在config 文件夹中找到 index.js 文件
在其中找到
proxyTable: {}
这一项,向其中加入
proxyTable: {
'/api': {
target: 'http://nopaper.cn:8080/', // 需要代理的域名
changeOrigin: true, // 代理
pathRewrite: {
'^/api': '' // 用 /api 代替 target 的路径
}
}
}
尝试一下
在组件中使用,这里以登陆为例:
login () {
this.$axios({
method: 'post',
url: '/api/v1/teacher/login',
params: {
't_num': this.t_num,
't_pwd': this.t_pwd
}
}).then(res => {
console.log(res)
let data = 'brear ' + res.data.access_token
this.$store.commit('set_token', data)
if (store.state.token) {
this.$router.push('/home')
console.log(store.state.token)
} else {
this.$router.replace('/login')
}
}).catch(err => {
console.log(err)
})
}
尝试一下:
请求成功 !