Apache虚拟目录配置及vue-cli反向代理的设置方法

配置需求来自于前后端分离。后台由于使用PHP或者Java,但是前端使用vue,React这些框架时怎么和后端有效的数据通信。反向代理是个很好的选择,虽然jsonp也可以,单并不好玩。

Apache配置虚拟目录

-实际上线项目需要通过域名来访问,比如http://www.xxx.com,但在本机上如何配置虚拟域名来访问本机的项目呢?

1.找到C:WindowsSystem32driversetchosts这个文件添加以下格式内容

  127.0.0.1    www.mytest.com //你的虚拟域名

2.配置Apache项目目录

1.找到 apacheconfhttpd.conf 这个文件,修改内容

  # Virtual hosts  Include conf/extra/httpd-vhosts.conf (这行的注释#去掉)

2.找到apacheconfextrahttpd-vhosts.conf这个文件配置项目目录

  <VirtualHost *:80>    ##ServerAdmin webmaster@dummy-host.example.com    DocumentRoot "C:/xampp/htdocs/mobileApp" ##你的后端项目目录    ServerName www.mytest.com ##虚拟域名    ##ServerAlias www.dummy-host.example.com    ##ErrorLog "logs/dummy-host.example.com-error.log"    ##CustomLog "logs/dummy-host.example.com-access.log" common    <Directory "C:/xampp/htdocs/mobileApp">       Options Indexes FollowSymLinks      DirectoryIndex index.html index.php      AllowOverride all      Order allow,deny      Allow from all    </Directory>  </VirtualHost>

3.proxyTable代理配置,以vue-cli为例

    proxyTable: {     '/api': {      target: 'http://www.mytest.com/api',      changeOrigin: true,      pathRewrite: {       '^/api': ''      }     }    },

这样就可以实现跨域访问了。

示例:

    $.ajax({          url: '/api/indexList.php',          type: 'GET',          success: function (data) {            that.list = data.data;            console.log(data);          }        })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

参与评论