Vue CLI 3.0 配置项 - 设置接口代理

最新推荐文章于 2023-06-09 14:35:19 发布

原创最新推荐文章于 2023-06-09 14:35:19 发布 · 677 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了在Vue CLI 3.0中设置接口代理以解决开发环境中的跨域问题。通过创建vue.config.js文件并配置代理，可以将API请求指向不同源的服务器。文章详细讲解了同源策略，以及如何配置多个匹配规则和网址匹配，提供了解决前端开发中跨域问题的方法。

本文来自「Vue虚拟实验」的小伙伴 effort，本节内容主要介绍了使用 Vue CLI 创建项目后的一些配置说明。在前面我们有提到过如何不写一行代码可进行跨域测试，这节内容通过配置代理实现跨域。

1、为什么要设置接口代理

屏幕快照 2020-03-16 下午1.06.58.png

看图识字，相信这个提示做过前端的同学应该都有遇到过吧。????

如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器

这是来自 Vue CLI 3.0 官方的一句话。在我看来这并不全面，难道前端应用和后端 API 服务在同一台主机上就不会有跨域问题吗？解释这个问题前，我们先了解一个概念同源策略

同源策略

如果两个页面的协议，端口（如果有指定）和主机都相同，则两个页面具有相同的源。我们也可以把它称为“协议/主机/端口 tuple”，或简单地叫做“tuple". ("tuple" ，“元”，是指一些事物组合在一起形成一个整体，比如（1，2）叫二元，（1，2，3）叫三元)

以上来自MDN解释。简单来说，就是有且仅当协议、域名、端口三者相同时我们就认为是同源的。如果协议、域名、端口中任意一个不相同时，就是不同源。当不同源之间相互请求资源，就会产生跨域问题。所以不一定前后端在同一个主机上就不会出现跨域问题

那么，在 vue 中我们是如何解决这种跨域问题呢？

2、举个????

假如我们需要把 http://localhost:8080/api/books 中的域名换成 http://www.effort.com, 这就相当于把请求换成 http://www.effort.com/api/book。在开始之前，我们需要在项目根目录下创建一个 vue.config.js 文件，插入下面代码

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载

// Book.vue
<template>
    <div class="home">
        <Book v-for:lists="lists"></Book>
    </div>
</template>


<script>
export default {
    import Book from '../components/Book.vue';
    name: 'App',
    components: {
       Book
    },
    data: function () {
        return {
            lists: []
        }
    },
    created: function() {
        this.lists = await this.$http.get('/api/books')   // 发送请求
    }
}
</script>


<style></style>

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://www.effortcheep.com',
        changeOrigin: true
      }
    }
  }
}

注意：

这个时候我们打开浏览器查看请求的Headers是会发现还是 http://localhost:8080/api/books

但真正的请求地址则是 http://www.effort.com/api/book

这里列举一些常用的参数说明

module.exports = {
  devServer: {
    proxy: {
      '/api': {                 // 需要转发的请求
        target: 'url',          // 目标地址
        ws: true,                // 如果要代理 websockets
        changeOrigin: true,     // 默认false，是否需要改变原始主机头为目标URL
        pathRewrite: {
          '^/api': '/api/3.0'   // 重写请求path，比如访问的是api/books，那么请求会被解析为/api/3.0/books
        }
      }
    }
  }
}

proxy多个匹配规则

devServer: {
  proxy: {
    '/book': {
        target: 'http://www.book.com',
        changOrigin: true,
    },
    '/user': {
        target: 'http://www.user.com',
        changOrigin: true,
    }
  }
}

proxy 的匹配规则是根据正则匹配如上 /book、/user 如果请求地址包含此字符串，就算匹配成功，一旦匹配成功就不会继续向下匹配：

1、请求 /book/info 则匹配 target 为 http://www.book.com

2、请求 /user/book/list 则匹配 target 为 http://www.book.com

注意：

如果我们需要以某个路径开头才算匹配成功，则可以改成：'^/book'、'^/user'

网址匹配

除了静态网址，可以使用全局模式来匹配网址，例如/api/**。有关更多详细信息，请参见上下文匹配。此外，还可以设置一个filter选项，该选项可以作为自定义函数来确定是否应代理请求：

proxyTable: {
  '**': {
    target: 'http://www.effortcheep.com',
    filter: function (pathname, req) {
      return pathname.match('^/api') && req.method === 'GET'
    }
  }
}

参考：https://cli.vuejs.org/zh/config/#jest

推荐阅读：

各种博客的代码高亮是如何实现的

不写一行代码，即可跨域的技巧

太强了，从 0 到 1 搭建 vue-cli

被“同源策略”限制的我却想着“跨域”