Home  >  Q&A  >  body text

javascript - vue-cli local interface forwarding

Use vue-cli to build the project, and the interface is forwarded as follows

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

In the development environment, configuring this can solve cross-domain requests in the development environment. Then in the production environment, after packaging through npm run build, will vue-cli handle this problem by itself? What else should I pay attention to in a production environment? Ask God for answers

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);
        });

Assuming that the above API is requested (the production environment does not have cross-domain), and the data can be requested after the local configuration interface forwarding, what should it be like in the production environment? After direct packaging, will the resources be placed on the server?

为情所困为情所困2734 days ago894

reply all(2)I'll reply

  • 天蓬老师

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

    vue-cli will not handle it for you. .
    The development environment uses the interface of the local agent, and the production environment uses the formal interface. Just write the logic in your own code, and call different interface addresses according to different environments

    reply
    0
  • 怪我咯

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

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

    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;
            }
    }

    reply
    0
  • Cancelreply