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);
}
})
以上就是本文的全部内容,希望对大家的学习有所帮助。
- 小顶堆Java实现
- Tomcat源码分析一:源码导入
- 如何使用Metasploit对安卓手机进行控制
- 关于MySQL DNS解析探究之二:unauthenticated user
- Thrift Direct Memory OOM问题解决方法
- Mapreduce程序中reduce的Iterable参数迭代出是同一个对象
- 内部威胁那些事儿(二):系统破坏
- 从用户行为去理解内容-item2vec及其应用
- Dubbo与Zookeeper、SpringMVC整合和使用(入门级)
- Websocket HandShake Sec-WebSocket-Accept 生成策略
- 关于JVM CPU资源占用过高的问题排查
- ActiveMQ简单介绍以及安装
- Java Process destroy方法kill进程,返回码测试
- 百度人脸识别API Java调用
- 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 数组属性和方法
- 【Lighthouse教程】scrapy爬虫初探
- python 手把手教你基于搜索引擎实现文章查重
- Intellij IDEA 如何自动生成 serialVersionUID
- Spring事务是如何应用到你的业务场景中的?
- BFE.dev前端刷题#9. 解密消息 (Facebook面试题)
- JUnit 5 测试问题 must be static unless the test class is
- Intellij IDEA 如何自动生成 serialVersionUID
- 图解面试题:SQL存储过程有什么用?
- LeetCode-6.Z 字形变换 - 消费补偿算法
- python + redis 实现 分布式队列任务
- Git error: hint: Updates were rejected because the remote contains work that you do hint: not have l
- 500 行代码写一个俄罗斯方块游戏
- k8s——资源限制
- k8s群集之动态扩缩容——HPA
- k8s群集的三种Web-UI界面部署