CODEWITHSUNDEEP
node.jsapachevue.jswebaxios
GrigoriyMoscow
GrigoriyMoscow

Reputation: 16

Access to API on the same server as VUE app

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.

Upvotes: 0

Views: 1270

Answers (1)

Phil
Phil

Reputation: 165062

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.

Upvotes: 1

Related Questions