1

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:

enter image description here

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

What am I doing wrong?

obe
  • 7,378
  • 5
  • 31
  • 40
  • I have the same issue - did you manage to get anywhere with it? – Richard Shergold Jan 07 '21 at 08:53
  • @RichardShergold kinda, but in a different way. I gave up on using the Ionic dev server as proxy and instead switched to use nginx. So I have nginx at the front, and it proxies to the Ionic dev server or to my (PHP) back-end according to the path. – obe Jan 07 '21 at 12:25
  • I have exact the same problem with a quite simular setup. I tried to get an answer from the ionic's forum, but until now, the problem is unsolved. Can you give me some more hints on how to use the setup with ngx? – Michael Feb 17 '21 at 20:48
  • I even tried to use vue.config.js in parallel to the ionic.config.json. Now the console shows me, that a proxy is activated but it still doesn't work, when I start ioinic serve. – Michael Feb 17 '21 at 20:51
  • @Michael sure, I posted it here as an answer. – obe Feb 17 '21 at 21:30
  • @obe Got it up and running! I just added a vue.config.js file with content of: ... devServer: { proxy: { '/api': { target: 'http://ionicapp:8888/', changeOrigin: true, logLevel: 'info' } } }, .... ionic.config.js has no proxies any more. My file structure is like /ionicapp/public/api/hello.php. This is the php, I want to call with my request. So I now doing in vue file: this.axios .get("public/api/hello.php") ionic serve no starts with proxy service – Michael Feb 18 '21 at 17:05

2 Answers2

4

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))
}
Michael
  • 416
  • 3
  • 10
  • 1
    THANK YOU! I had almost given up on ionic because of this. They really need it to read the ionic config. Makes no sense to have to create a vue config when ionic docs only refer to the ionic config file. – Aurelion Jan 02 '22 at 05:37
  • BTW, I had to add a wildcard to the proxy path. So '^/api' instead of '/api'. Otherwise it always returned 404. – Aurelion Jan 02 '22 at 05:38
  • THANK YOU!!!! SO MUCH!!! As Aurelion, I had almost given up on ionic because of this. This is absolutely MENTAL – Esteban Nov 03 '22 at 18:40
0

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.

obe
  • 7,378
  • 5
  • 31
  • 40