Access to API on the same server as VUE app

Question

I am trying to reach api on http://mysite.flow (hosts stored domain on 127.0.0.1) from Vue app which have next apache conf:

<VirtualHost *:80>
ServerAdmin [email protected]
ServerName www.mysite.site
ServerAlias mysite.site

DocumentRoot /var/app/mysite-vue/dist
ErrorLog /var/www/fe01/log/error.log
CustomLog /var/www/fe01/log/requests.log combined


RewriteEngine on
RewriteCond %{SERVER_NAME} =www.mysite.site
RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
ProxyPreserveHost On

ProxyPass / http://127.0.0.1:5000
ProxyPassReverse / http://127.0.0.1:5000

ProxyPass /usersreg http://mysite.flow/usersreg
ProxyPassReverse /usersreg http://mysite.flow/usersreg

</VirtualHost>

and config for API (http://mysite.flow)

<VirtualHost *:80>
ServerName mysite.flow

DocumentRoot /var/www/mysitefe012main/html
ErrorLog /var/www/mysitefe012main/log/error.log
CustomLog /var/www/mysitefe012main/log/requests.log combined

RewriteEngine on

ProxyPreserveHost On

ProxyPass /usersreg http://localhost:3030/usersreg
ProxyPassReverse /usersreg http://localhost:3030/usersreg

In VUE i have:

this.$axios
  .post("/usersreg", {
    username: this.user_name,
    email: this.user_email,
    phone: this.user_phone,
    extra: ["extra", "extraa1", "etraa1"],
  })
  .then((response) => {
    console.log(response.data);
  });

And get next response:

We're sorry but title doesn't work properly without JavaScript enabled. Please enable it to continue.

It is the default response for the robot request to the not pre-rendered VUE.

The goal - is to make post or get request from vue application to api on custom port through Apache. As i understand, when request to /usersreg from vue is called, it serves by vue-router, not by apache.

Your Vue app should be built and deployed to /var/app/mysite-vue/dist. You should not be proxying through to the dev server, assuming that's what is running on port 5000 — Phil
– Phil, Commented Aug 18, 2020 at 23:06

Phil · Accepted Answer · 2020-08-18 01:12:36Z

1

Taking a big guess here that your backend service is the one running on port 3030, you probably want this proxy configuration in your front-end vhost (mysite.site)

ProxyPreserveHost On
ProxyPass /usersreg http://localhost:3030/usersreg
ProxyPassReverse /usersreg http://localhost:3030/usersreg

This will proxy any request for https://mysite.site/usersreg (ie, your Axios call) to your backend service running on port 3030.

Remove all the other Proxy* configs from that host.

answered Aug 18, 2020 at 1:12

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

GrigoriyMoscow Over a year ago

i config apache the way U've described, i still receive the same answer. So, somehow this request still do not reach apache...

GrigoriyMoscow Over a year ago

may be there are some additional rewrite rules needed?

GrigoriyMoscow Over a year ago

I put also .htaccess file to /var/app/mysite-vue/dist according router.vuejs.org/guide/essentials/…

GrigoriyMoscow Over a year ago

As i understand, when request to /usersreg from vue is called, it serves by vue-router. not by apache. How i can solve it?

Collectives™ on Stack Overflow

Access to API on the same server as VUE app

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related