首页  >  问答  >  正文

javascript - vue-cli 本地接口转发

采用vue-cli构建项目,接口转发如下

proxyTable: {
      '/api': {
            target: 'http://abcd.com/api',
            changeOrigin: true,
            pathRewrite: {
                '^/api': ''
            }
        }
    }

在开发环境下,配置了这个,可以解决在开发环境下的跨域请求,那么在生产环境下 通过 npm run build打包之后,这一块的问题vue-cli会自己处理吗?在生产环境下还需要注意什么东西?求大神解答

axios.post('api/auth/register', {
          'firstname':this.firstname,
          'lastname':this.lastname,
          'email':this.email,
          'password':this.password,
          'password_confirmation':this.configPassword
        })
        .then(function (response) {
          console.log(response.data);
        })
        .catch(function (error) {
          console.log(error);
        });

假设请求如上api(生产环境没有跨域),在本地配置接口转发之后可以请求到数据,那么在生产环境应该要怎么样?直接打包之后,将资源放在服务器吗?

为情所困为情所困2734 天前895

全部回复(2)我来回复

  • 天蓬老师

    天蓬老师2017-05-16 13:27:37

    vue-cli不会帮你处理。。
    开发环境使用本地代理的接口,生产环境使用正式的接口,这个自己代码里逻辑写好就可以了,根据不同环境调用不同的接口地址

    回复
    0
  • 怪我咯

    怪我咯2017-05-16 13:27:37

    这个是vue-cli反向代理的一个实现,方便开发环境使用。
    生产环境中反向代理的方式也有很多:nginxApache之类的,如果没有跨域,不需要反向代理的话,就把前端代码直接丢在接口服务器中就行了(tomcat、jboss之类),但不推荐,静态资源就应该走静态服务器
    我们的生产环境是nginx,配置大概是这样的:

    server {
            listen       80;
            server_name  localhost;
    
            location / {
                root /home/project/;
                index  index.html index.htm;
            }
    
            location /api {
                proxy_pass http://10.0.0.10:8080/api;
            }
    }

    回复
    0
  • 取消回复