这是一个很简单的方案,通过启用Apache反向代理解决js跨域问题。

为什么要这么做?

在现在的开发过程中大家会遇到这样一个问题:后端代码写好之后,前端需要将后端代码部署到本地才能正常使用api。若直接使用远程服务器上的api(例如测试服务器上的api)就会出现js跨域问题,导致远程服务器上的api无法使用。但是,将后端代码部署到前端的本地会出现以下几个问题:

  • 前端下载后端代码到本地并配置,花时间!
  • 后端代码有更新之后,前端也需要更新本地的后端代码,花时间!
  • 前端本地安装的服务器环境可能略有差异,从而导致后端代码在本机上不能正常运行,需要后端协助调试,花时间!

为了简单高效的开发,建议前端启用Apache反向代理解决js跨域问题。在解决js跨域问题之后,前端可直接使用测试服务器上的api接口,不需要再在本地部署后端代码。这样前端和后端都只需要在关心自己的代码就可以了。

正向代理和反向代理

这里有一篇非常好的文章做了详细解释:正向代理与反向代理有什么区别。我在这里还是简单概述一下:

  • 正向代理:正向代理隐藏了真实的请求客户端,服务端不知道真实的客户端是谁,客户端请求的服务都被代理服务器代替来请求。用浏览器访问 www.google.com 时,被残忍的拒绝了,于是你可以在国外搭建一台代理服务器,让代理帮我去请求 google.com,代理把请求返回的相应结构再返回给我。
  • 反向代理:反向代理隐藏了真实的服务端,当我们请求 www.baidu.com 的时候,背后可能有成千上万台服务器为我们服务,但具体是哪一台,你不知道,也不需要知道,你只需要知道反向代理服务器是谁就好了,www.baidu.com 就是我们的反向代理服务器,反向代理服务器会帮我们把请求转发到真实的服务器那里去。

准备

在本地安装好apache服务器!

怎么做?

启用proxy模块

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

Windows环境一般是安装了xampp或者wamp。在xampp或者wamp安装目录下,修改httpd.conf配置文件,去掉以下两行前面 # 号,从而启用Apache proxy module。

在httpd-vhosts.conf如果没有那就直接在httpd.conf里配置virtualHost实现反向代理:

<VirtualHost *:80>
ServerName 10.5.1.230
ProxyRequests Off
 
<Proxy *>
Order deny,allow
Allow from all
</Proxy>
# DocumentRoot D:\xampp\htdocs\test
# <Directory "D:\xampp\htdocs\test">
# Options +Indexes +Includes +FollowSymLinks +MultiViews
# AllowOverride All
# Require all granted
# </Directory>
ProxyPass /xx_xx http://localhost/xxx_api
# ProxyPass ^/xx_xxhttp://localhost
ProxyPassMatch ^/xx_xx http://localhost/xxx_api
 
# ProxyPass / http://www.b.com/
# ProxyPassReverse / http://www.b.com/
# ProxyPassMatch ^/api http://www.b.com/
</VirtualHost>

ProxyRequests Off 指令是指采用反向(reverse)代理

ProxyPass 指令允许将一个远端服务器映射到本地服务器的URL空间中

配置完成之后,访问 http://localhost/project 实际就是访问 http://ip_address/project 上的资源

重启Apache

最后修改:2023 年 03 月 06 日
如果觉得我的文章对你有用,请随意赞赏