与VUE应用在同一服务器上访问API

如何解决与VUE应用在同一服务器上访问API

我正在尝试从具有下一个apap conf的Vue应用程序访问http://mysite.flow（主机存储域为127.0.0.1）上的api：

<VirtualHost *:80>
ServerAdmin [e-mail]
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>

和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

在VUE中，我有：

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

并获得下一个答复：

很抱歉，如果不启用JavaScript，标题无法正常运行。请启用它以继续。

这是机械手对未预渲染的VUE的默认响应。

目标-是通过Apache在自定义端口上将vue应用程序发布或获取请求到api。 据我了解，当调用从vue向/ usersreg的请求时，它是由vue-router服务的，而不是由Apache服务的。

解决方法

在这里大猜测您的后端服务是在端口3030上运行的后端服务，您可能希望在前端虚拟主机（mysite.site）中使用此代理配置

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

这会将对https://mysite.site/usersreg的任何请求（即您的Axios呼叫）代理到在端口3030上运行的后端服务。

从该主机上删除所有其他Proxy*配置。