Apache虚拟目录配置及vue-cli反向代理的设置方法
时间:2022-07-27
本文章向大家介绍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);
}
})
以上就是本文的全部内容,希望对大家的学习有所帮助。
- 洛谷P3327 [SDOI2015]约数个数和(莫比乌斯反演)
- .Net中的AOP系列之构建一个汽车租赁应用(上)
- Modbus RTU驱动程序开发指引
- freeRTOS任务创建
- 洛谷P4213 Sum(杜教筛)
- JVM活学活用——调优工具
- .Net中的AOP系列之构建一个汽车租赁应用(下)
- Zookeeper学习笔记——2 Shell和Java API的使用
- Java基础巩固——反射
- 手把手教你在树莓派上搭建web服务器
- 安装和搭建基于netcore的demo
- 项目心得:广度遍历搜索部门处理业务
- 使用JAVA开发微信公众平台(一)——环境搭建与开发接入
- BZOJ4805: 欧拉函数求和(杜教筛)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 一天一大 leet(从先序遍历还原二叉树)难度:困难 DAY-18
- Go语言入门(八)线程安全&锁
- 一天一大 leet(最佳观光组合)难度:中等 DAY-17
- Django环境搭建
- javascript 中的位运算符
- python 操作 redis 的一些例子
- mongoDB(一)生产环境基础实践
- 一天一大 leet(验证回文串)难度:简单 DAY-19
- mongoDB(二)mongoDB副本集实战
- 一天一大 leet(正则表达式匹配)难度:困难 DAY-20
- mongoDB (三) mongoDB分片集群
- mongoDB (四) mongoDB认证
- 一天一大 leet(二叉树中的最大路径和)难度:困难 DAY-21
- 一天一大 leet(把数字翻译成字符串)难度:中等 DAY-9
- 一天一大 leet(模式匹配)难度:中等 DAY-22