How to use a dev server proxy with Ionic + Vue?

Question

I want to use Ionic's Proxies feature in an Ionic Vuejs project.

I have seen questions and answers for proxy problems with Ionic + Angular, and for Vue + Webpack, but couldn't find a solution for my Ionic + Vue problem.

For now I am just working in a browser (i.e. and not building for native yet).

I followed the instructions, and my ionic.config.json now looks like this:

{
    "name": "myapp",
    "integrations": {
        "capacitor": {}
    },
    "type": "vue",
    "proxies": [
        {
            "path": "/webhp",
            "proxyUrl": "https://www.google.com"
        }
    ]
}

I run ionic serve --no-open and browse to http://localhost:8100/webhp.

The request is not proxied, my app is loaded, and I get a router error: [Vue Router warn]: No match found for location with path "/goto".

When I try to access that URL using an AJAX request in my code:

await axios.post("/webhp");

I get an error:

I am using Ionic CLI 6.12.2 and Ionic Framework @ionic/vue 5.5.2.

What am I doing wrong?

Answer 1

I mentioned in a comment that I implemented a workaround using nginx, and was asked for details, so I am posting it as an answer.

In my setup, I have nginx listening on port 8888 and the Webpack Dev Server listening on port 8100.

I access the website via port 8888, e.g. http://local.mydomain.com:8888/.

My nginx configuration looks like this:

server {
    listen 8888;
    listen [::]:8888;

    root /home/user/mydomain/public;
    index index.php;

    server_name local.mydomain.com;

    location / {
            proxy_pass http://local.mydomain.com:8100/;
            proxy_set_header Host local.mydomain.com:8100;
    }

    location /x/ {
            add_header Access-Control-Allow-Origin "*";
            try_files $uri $uri/ /index.php?$args;
    }

    location ~ \.php$ {
            include snippets/fastcgi-php.conf;
            fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
            fastcgi_keep_conn on;
            fastcgi_split_path_info ^(.+?\.php)(/.*)$;
            if (!-f $document_root$fastcgi_script_name) {
                    return 404;
            }
            fastcgi_read_timeout 86400;
            include fastcgi_params;
    }

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    location ~ /\.ht {
            deny all;
    }

    access_log /var/log/nginx/local.mydomain.com.access.log;
    error_log /var/log/nginx/local.mydomain.com.error.log;
}

Requests for paths that begin with /x/ go to index.php.

All other requests get proxied to Webpack on port 8100.

The rest of the configuration is not actually related to this proxy thing; I just included it to give a complete config.

Answer 2

Got it finally up and running. I added a vue.config.js with the devServer Section as I always did in "normal" vue projects.

ionic serve no starts with the wanted proxy configuration and my backend is proxied to the given address.

This my vue.config.js I added:

module.exports = {
  runtimeCompiler: true,      
  devServer: {
    proxy: {
      '/api': {
        target: 'http://ionicfez:8888/',
        changeOrigin: true,
        logLevel: 'info'
      }
    }
  },

  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'assets'
}

This is my ionic.config.json

{
  "name": "ionicfez",
  "integrations": {
    "capacitor": {}
  },
  "type": "vue"
}

My project is structured as

/ionicfez
  /public
    /api
      /hello.php
  /src
  ...

And this is a simple test function in my .vue file, that now is proxied

init() {
  this.axios
    .get("public/api/hello.php")
    .then(result => {
      console.log(result)
    })
    .catch(error => console.error(error))
}