vue项目开发中,我们在进行接口请求时需要配置反向代理,这个我们在本地开发是可以通过vue项目的反向代理就可以实现,但是如果放在服务器上的话,就需要在服务器上进行代理配置了。
今天我们来记录一下在宝塔服务器上的反向代理。
宝塔版本
8.0.4
配置
要配置宝塔面板以实现反向代理,使得访问 https://www.wanjunshijie.com/login
时能够转发到 http://test.wanjunshijie.com/login
,你可以按照以下步骤操作:
-
登录宝塔面板:
打开宝塔面板的管理界面。 -
选择网站:
在宝塔面板中,找到并点击“网站”这一选项,然后选择你需要设置反向代理的网站。 -
设置反向代理:
在网站详情页中,找到“反向代理”的设置选项,点击进入。 -
添加反向代理规则:
- 源URL:输入
/login
。这表示所有访问这个路径的请求都会被转发。 - 目标URL:输入
http://test.wanjunshijie.com/login
。这是你的目标接口地址,所有匹配到源URL的请求都会转发到这个地址。
- 源URL:输入
-
保存设置:
完成以上设置后,点击保存或应用,使设置生效。 -
测试配置:
通过访问https://www.wanjunshijie.com/login
来测试配置是否生效。如果一切设置正确,这个地址应该能正确转发到http://test.wanjunshijie.com/login
。
确保在配置反向代理时,服务器的防火墙和安全组设置允许这种转发请求。此外,如果你的目标服务(http://test.wanjunshijie.com/login
)需要特定的HTTP头或其他特殊处理,确保在宝塔的反向代理设置中进行相应配置。
测试是否成功
在没有配置反向代理的时候我们访问login会报404
我们配置好以后,用postman测试可以看到接口有反应了,那么表示我们的反向代理配置成功了。