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

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

赞 (0)

相关推荐

  • 详解vue-cli构建项目反向代理配置

    详解vue-cli构建项目反向代理配置

    本文介绍了vue-cli构建项目反向代理配置,分享给大家,具体如下: proxyTable: {//配置请求代理 '/dlsys':{ target:'http://192.168.16.209:81', changeOrigin:true, pathRewrith:{ '^/dlsys': '/dlsys' } }, '/dlapi':{ target:'http://192.168.16.209:81', changeOrigin:true, pathRewrith:{ '^/dlapi':

  • 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 //你的

  • PHP编程之设置apache虚拟目录

    PHP编程之设置apache虚拟目录

    apache虚拟目录设置方法分享,供大家参考,具体内容如下 1.开启"虚拟目录配置文件"httpd-vhosts.conf 文件路径:\wamp\bin\apache\apache2.4.9\conf\extra\httpd-vhosts.conf 将以下配置: # Virtual hosts  # Include conf/extra/httpd-vhosts.conf   改为: # Virtual hosts  Include conf/extra/httpd-vhosts.co

  • apache虚拟主机配置的三种方式(小结)

    目录 一.基于IP 二.基于主机名 三.基于端口 记事本打开httpd.conf文件 ,该文件在apache的目录下,如: D:\AppServ\Apache2.2\conf,修改如下两处: LoadModule vhost_alias_module modules/mod_vhost_alias.so //去掉前面的#,意思是启用apache的虚拟主机功能,第203行 Include conf/extra/httpd-vhosts.conf //去掉#的意思是从httpd-vhosts.con

  • Windows下用Nginx配置https服务器及反向代理的问题

    Windows下用Nginx配置https服务器及反向代理的问题

    请求逻辑 前端 --> https方式请求nginx nginx --> 通过http请求后端服务 安装OpenSSL 下载地址 然后配置环境变量.在系统环境变量中添加环境变量: 变量名:OPENSSL_HOME 变量值:F:\OpenSSL-Win64\bin; (变量值为OPENSSL安装位置下的bin目录) 生成证书 用命令行随便打开一个目录, 使用如下命令生成证书 # 创建私钥 # test文件名是自己随便起即可, 这个命令会让你设置两次rsa的密码, 请务必记住该密码, 后续需要使用

  • VueCli4项目配置反向代理proxy的方法步骤

    Vue Cli4创建项目之后,没有配置vue.config.js,如果直接发起axios请求,可能会引起跨域问题. 以豆瓣电影首页的最近热门 为例: axios({ method: "get", url: "https://movie.douban.com/j/search_subjects", params: { type: "movie", tag: "热门", page_limit: 50, page_start: 0

  • Vue项目配置跨域访问和代理proxy设置方式

    在vue单页应用项目开发时,避免不了要请求后端,这时通常就会出现跨域问题.有2种常用的解决方案 后端设置允许跨域访问 前端通过代理进行访问后端 下面我们只说说如何配置vue-cli代理访问: vue-cli代理 最简单就是配置vue conifg进行实现 下面配置3个请求的后端,分别是: 请求http://localhost:4201/adminapi/*会代理请求http://localhost:8180/* 请求http://localhost:4201/portalapi/*会代理请求ht

  • apache虚拟主机配置: 二级目录访问跳转到其他根文件夹

    访问 http://www.abc.com/course/ ,实际访问的是:d:/www/moodle/index.PHP <VirtualHost *:80> ServerAdmin webmaster@abc.com DocumentRoot "d:/www/abc" ServerName www.abc.com ##ServerAlias Alias /course "d:/www/moodle" <Directory "d:/ww

  • Ubuntu 16.04与Apache虚拟主机配置的步骤详解

    前言 众所周知在window下,Apache的配置文件是httpd.conf,但在Linux下安装了Apache后发现其配置并不像window下那么简单,Linux下Apache将各个设置项分在了不同的配置文件中,想想也是有很大的理由的,这样子可以使用户在开发过程中自由的搭配其不同的功能模块,更好的提高效率,不过,如果不事先了解Apache,可能在配置时蒙圈. Ubuntu中Apache的配置文件是//etc/apache2/apache2.conf.Apache在启动时会找到这个文件并自动读取

  • Apache 虚拟目录和默认首页的设置

    虚拟目录 1.找到"conf/httpd.conf" 文件 2.在节点:<IfModule alias_module>里增加 Alias /aidd2008 "D:/php/web/aidd2008" 其中 aidd2008 是你想要访问的虚拟目录: D:/php/web/aidd2008 为物理路径,以[/]代替[\]" 我们就在</IfModule>后面接着加: 复制代码 代码如下: <Directory "D:

  • Apache虚拟目录简单知识汇总

    Apache的虚拟目录功能: 已知我们把web应用放在Apache默认的hdocs目录下,Apache会自动的管理它.若我们想把web应用放在其他目录下, Apache仍然能够访问它,则需要用到Apache的虚拟目录功能. 实验环境: RHEL6.5一台,window7或window10一台 实验步骤 这里我们先检查系统是否自带httpd,一般在RHEL6.5都是系统自带的所以我们不需要进行安装了 进入主配置文件进行修改 修改主配置文件的监听端口和域名 启动httpd服务关闭防火墙 编写一段语句

随机推荐