VUE学习9-反向代理配置

起源:项目中练习使用axios对maoyan电影的电影列表API访问。

项目中安装和使用axios:

  1. 项目目录中安装axios。cnpm install axios –save
  2. App.vue中引入axios。import axios from ‘axios’
  3. 使用axios。在<script>组件内,export default{… mounted(){ axios.get(‘m.maoyan.com/ajax/movieOnInfoList?token=’).then(res => {consolo.log(res.data)})}}
  4. 浏览器出现禁止跨域请求。
阻止跨域请求。。。

跨域请求被阻止的解决方式:

  1. API主机增加JSONP接口。(不现实。。)
  2. API主机开放“Access-control-allow-origin”,即将其属性值设为*。(可在F12 -> Network -> 选取response文件 -> Headers -> response headers中查看)
  3. 项目设置反向代理。(https://cli.vuejs.org/zh/config/#devserver)

何时设置反向代理:当前端应用与后端API不再同一主机时,就需要在开发环境下将访问API地址的请求进行代理转发。


设置API代理步骤:

  1. 新建vue.config.js(放置于package.json同级)
  2. 配置代理规则。打开vue.config.js,新建指向API的代理和代理主机。
  3. 保存配置文件,重启npm。
// vue.config.js
module.exports = {
    // proxy config 
    devServer: {
        proxy: {
            // 指向/ajax的请求转发到target服务器
            '/ajax': {
                // App.vue axios.get('maoyan API')
                target: 'http://m.maoyan.com',
                changeOrigin: true
            },
        }
    }
}
// App.vue
mounted () {
    // vue.config.js中,配置转发代理前
    // axios.get('http://m.maoyan.com/ajax/movieOnInfoList?token=').then(res => {
    //   console.log(res)
    // })

// 配置转发代理后,删除主机名
    axios.get('/ajax/movieOnInfoList?token=').then(res => {
      console.log(res)
    })
  },
重启服务器后,成功获取到API返回值

⚠️注意:如果不重启npm,则会出现404错误。

配置完vue后,如未重启则会出错。(此时App.vue中API地址已经删除主机名,因此404)