【Vue学习总结】02-代理服务器

最新推荐文章于 2024-11-30 18:47:54 发布

原创

最新推荐文章于 2024-11-30 18:47:54 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文总结了在Vue.js开发环境中配置代理服务器的详细步骤和应用场景。通过配置代理，前端可以绕过跨域限制，顺利访问不同服务器上的后端接口。在/config/index.js文件中进行设置，并给出具体配置示例，同时说明了多个代理的配置方法。

1、场景

在Vue的开发过程中会遇到前端页面和后端接口不在同一个服务器的情况，

那么这个时候就需要配置代理，这样前端页面可以通过代理访问后端接口

2、配置文件

在项目的/config/index.js中进行配置

3、配置内容

打开index.js文件，然后进行配置，具体如下：

dev: {

    // Paths
    assetsSubDirectory: 'static',// 静态资源文件夹
    assetsPublicPath: '/', // 发布路径
    // 代理配置表，在这里可以配置特定的请求代理到对应的API接口
    // 例如将'localhost:8080/api/'代理到'st:8888/xxx'
    proxyTable: {
    //这里配置'/api' 就等价于target的内容, 你在链接里访问/api === http://localhost:8080,就是用/api代替那一长串重复的东西,api就是你起的接口服务名，有时候会有好多服务名，而且不都是api这种形式的，我们要注意
      '/api': {  
    //但是我们在api.js中，也就是封装的api层，是这样的：url: '/lbjk/saveUserInfo', 简写，然后在加上target中的就是：http://localhost:8080/api/lbjk/saveUserInfo完整的接口路径就是这样的
        target: 'http://192.168.30.207:8888/',  //需要代理的地址，即接口的IP+端口
        changeOrigin: true,  //是否跨域，此项设置为TRUE
        secure: false, //如果接口是HTTPS，则此项设置为TRUE
        pat