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

 更新时间:2017年09月05日 09:50:21   作者:yy211zhu  
本篇文章主要介绍了Apache虚拟目录配置及vue-cli反向代理的设置方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

Apache配置虚拟目录

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

1.找到C:\Windows\System32\drivers\etc\hosts这个文件添加以下格式内容

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

2.配置Apache项目目录

1.找到 \apache\conf\httpd.conf 这个文件,修改内容

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

2.找到\apache\conf\extra\httpd-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);
        }
      })

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

相关文章

  • Linux中tail命令用法详解

    Linux中tail命令用法详解

    tail命令也是一个非常常用的文件查看类的命令,接下来通过本篇文章给大家介绍linux中tail命令的用法详解,感兴趣的朋友一起看看吧
    2016-09-09
  • Memcached 分布式缓存实现原理简介

    Memcached 分布式缓存实现原理简介

    这篇文章主要介绍了Memcached 分布式缓存实现原理简介,具有参考价值,需要的朋友可以参考下。
    2016-06-06
  • linux磁盘管理知识汇总

    linux磁盘管理知识汇总

    这篇文章主要介绍了linux磁盘管理知识汇总的相关资料,需要的朋友可以参考下
    2018-08-08
  • 解决Linux中Systemd服务环境变量缺失的问题

    解决Linux中Systemd服务环境变量缺失的问题

    在Linux系统运维中,我们可能会遇到在使用systemd管理的服务时无法获取系统环境变量,尤其是PATH变量,这确实是一个常见的挑战,因为systemd启动的服务通常不会加载用户的环境变量,下面,我们将一起探讨解决这一问题的几种方法,需要的朋友可以参考下
    2024-01-01
  • Centos7环境下YUM的搭建方法

    Centos7环境下YUM的搭建方法

    大家好,本篇文章主要讲的是Centos7环境下YUM的搭建方法,感兴趣的同学赶快来看一看吧,对你有帮助的话记得收藏一下,方便下次浏览
    2021-12-12
  • Linux用make指令编译进度条程序

    Linux用make指令编译进度条程序

    这篇文章主要为大家详细介绍了在Linux下写一个简单的进度条,用make指令进行编译,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • linux安装apache过程中注意的问题

    linux安装apache过程中注意的问题

    这篇文章主要为大家介绍了linux安装apache过程中注意的问题,帮助大家进行顺利安装,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • Ubuntu 20.04换阿里源的方法

    Ubuntu 20.04换阿里源的方法

    这篇文章主要介绍了Ubuntu 20.04换阿里源的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • 腾讯云主机安装LNMP环境及wordpress教程

    腾讯云主机安装LNMP环境及wordpress教程

    本文给大家分享的是一个菜鸟学生首次在腾讯云主机上安装LNMP环境以及WordPress的详细教程,以安装成功为目的,中间没涉及安全优化等,高手们请直接略过。
    2016-04-04
  • linux无损扩容的方法

    linux无损扩容的方法

    这篇文章主要介绍了linux无损扩容的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12

最新评论