【踩坑+实战】vue+axios使用代理解决跨域问题

目录

 

测试请求用到的API

1、情况分析

2、安装axios

3、main.js配置

4、config目录配置

5、组件中的调用

6、结果分析

---

测试请求用到的API

豆瓣电影排行前250：

http://api.douban.com/v2/movie/top250

 

1、情况分析

跨域：是基于同源策略，作用是保护自身文件，具体的介绍自行度娘

 

2、安装axios

npm install axios --save

 

3、main.js配置

操作：添加代码

import axios from 'axios'
Vue.prototype.$axios = axios
Vue.use(axios)

 

4、config目录配置

文件位置：config/index.js

1、proxyTable属性：这里面默认是空的，没有内容，我们在这里面添加以下代码

操作： 添加代码

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {//服务器代理
      '/api': {
        target: 'https://api.douban.com',//代理地址
        changeOrigin: true,//是否允许开启代理
        pathRewrite: {//代理地址重写
          '^/api': ''
        }
      }
    }

2、重启服务器，这点很重要，因为修改了配置文件，重启服务器才生效

 

5、组件中的调用

注意，现在就不用http://api.douban.com/v2/movie/top250这个地址了，由于使用了代理，如果还用原来的这个地址的话，代理不会生效，因此，应该使用

/api/movie/top250

created () {
     this.loadingData();
},
methods: {
    loadingData () {
      this.$axios.post('/api/v2/movie/top250').then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err)
      })
    }
}

6、结果分析

请注意请求头信息，Request URL 不是api.douban.com，而是本地的localhost，这是因为我们使用了代理