第一次使用Vue2.0框架做项目,中间遇到了跨域问题,从网上找到了解决办法,用官网推荐的axios很容易实现,先记录一下,万一以后忘了呢
1. 使用npm install axios --save下载
2.在main.js中进行引入
3.在config文件夹下的index.js文件中的proxyTable中设置
此时跨域即已成功,但若想在生产环境下也能跨域成功,还需在设置
4. 在dev.env.js中(开发环境中),生产环境中真正部署到服务器上如果是非同源还是存在跨域问题,如我们部署的服务器端口是3001,需要前后端联调,第一步前端我们可以分生产production和开发development两种环境分别测试,在config/dev.env.js和prod.env.js里也就是开发/生产环境下分别配置一下请求的地址API_HOST,开发环境中我们用上面配置的代理地址api,生产环境下用正常的接口地址,所以这样配置
5. 在pro.env.js
6.然后第二步后端服务器配置一下cros跨域即可,就是access-control-allow-origin:*允许所有访问的意思。综上:开发的环境下我们前端可以自己配置个proxy代理就能跨域了,真正的生产环境下还需要后端的配合的
7.请求代码
sayOut () {
this.$axios.get('/api/v2/movie/top250')
.then((response) => {
console.log(response.data.subjects)
this.movieArr = response.data.subjects // 这里要强调一下这个this 箭头函数指的是它的父级也就是vue实例 然后不用箭头函数的话 this是一个undefined 无法.movieArr来给他赋值 这里要注意一下 我被坑了半天 希望小伙伴不要被坑
})