Vue2.0项目中使用axios进行跨域

时间:2024-04-09 18:21:45

第一次使用Vue2.0框架做项目,中间遇到了跨域问题,从网上找到了解决办法,用官网推荐的axios很容易实现,先记录一下,万一以后忘了呢

1. 使用npm install axios  --save下载

2.在main.js中进行引入

Vue2.0项目中使用axios进行跨域

3.在config文件夹下的index.js文件中的proxyTable中设置

Vue2.0项目中使用axios进行跨域

此时跨域即已成功,但若想在生产环境下也能跨域成功,还需在设置

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

Vue2.0项目中使用axios进行跨域

5. 在pro.env.js

Vue2.0项目中使用axios进行跨域

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来给他赋值  这里要注意一下 我被坑了半天 希望小伙伴不要被坑
        })