宝塔面板配置vue反向代理
关于跨域
跨域是什么?
出于浏览器的同源策略限制。
同源策略(Sameoriginpolicy) 是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。
可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。
同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port);
当一个请求url的协议
、域名
、端口
三者之间任意一个与当前页面url不同即为跨域
当前页面url | 被请求页面url | 是否跨域 | 原因 |
---|---|---|---|
http://www.test.com/ | http://www.test.com/index.html | 否 | 同源(协议、域名、端口号相同) |
http://www.test.com/ | https://www.test.com/index.html | 跨域 | 协议不同(http/https) |
http://www.test.com/ | http://www.baidu.com/ | 跨域 | 主域名不同(test/baidu) |
http://www.test.com/ | http://blog.test.com/ | 跨域 | 子域名不同(www/blog) |
http://www.test.com:8080/ | http://www.test.com:7001/ | 跨域 | 端口号不同(8080/7001) |
如何解决跨域(原理)
正向代理
这种经常应用于本地生产环境中
vue、react项目的运行需要nodejs环境,用此环境可以做一个代理服务器,也就是中间层
在请求发送(接收)之前加入中间层,将不同的域名转换成相同的,就解决了跨域的问题。客户端发送请求时,不直接到服务器,而是先到代理的中间层,利用中间者去代理
1、浏览器向中间者发送请求
2、中间者把请求给到服务器
3、服务器发送结果给中间者
4、中间者发送结果给浏览器
比如下面这个例子:
直接请求:两个地址的端口不一样,产生了跨域
配置代理后请求:
在这里将http://localhost:8080的这个域名装换为http://localhost:8081,
再将请求发送到服务器,这样在服务器端收到的请求就是使用的http://localhost:8081;
同理,当服务器返回数据的时候,也是先到代理的中间层,
将http://localhost:8081转换成http://localhost:8080,这样在客户端也是在同源下访问的了。
反向代理
此方法常用于服务器端,由客户端向反向代理服务器发送请求,反向代理服务器向真实服务器请求
反向代理正向代理的区别:
他们的行为是一样的,都是通过代理服务器去转发请求给目标服务器
区别是:正向代理是客户机和代理服务器之间是透明的,反向代理代理服务器和目标服务器是透明的。
反向代理可以做负载均衡。
正向代理可以做cdn缓存,还有我们用的vpn;
正向代理隐藏真实客户端,反向代理隐藏真实服务端。
实现代码
使用建议及常见问题见最下方
开发环境(本地运行项目)
假设接口域名为www.fuwuqi.cn
。
使用
对于不同配置的使用是一样的,建议先看一下下面的常见问题在制作
axios({
url:'/api/register', //最终相当于https://www.fuwuqi.cn/api/register
// 其他配置项不在展示
).then(function (res) {
console.log(res);
})
vue-cli 4之前版本项目
先找到config/index.js,dev对象下的proxyTable中
写法:
proxyTable: {
'/api': {
target: "www.fuwuqi.cn/api", // API服务器的地址
changeOrigin: true, // 如果设置为true,那么本地会虚拟一个服务器接收你的请求并代你发送该请求,这样就不会有跨域问题(只适合开发环境)
pathRewrite: {
'^/api': '' // 重写路径,根据需要配置,见上面常见问题的问题1,比如'/api/aaa/ccc'重写为'/aaa/ccc'
}
}
},
重启项目
vue-cli 4之后项目
需要新建vue.config.js 【默认情况下,4以上的版本可以直接识别这个js文件,把它当做自己的配置文件】
步骤如下:
1、在项目框架的根目录下新建文件:vue.config.js
2、给新建的文件内添加解决跨域的代码部分
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'https://域名/api',// API服务器的地址
ws: true, //代理websockets
changeOrigin: true, // 虚拟的站点需要更管origin
pathRewrite: { //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
'^/api': ''
}
}
}
}
}
3、重启项目,这样的话新建的文件就可以被识别了,一定要重启
基于vite的项目
新建vite.config.js,如果有直接修改
在defineConfig中添加以下代码
server:{
proxy:{
'/api': {
target: 'http://域名/api',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')// 重写路径
}
}
}
生产环境
保持前端不动,依旧是代理状态
在项目打包部署后,原来的本地代理就不能生效了,就需要使用Nginx
或Apache
进行反向代理;
假设:
前端项目域名:www.qian.cn
后端项目域名:www.hou.cn
宝塔面板直接可视化修改
修改方法
1、打开宝塔面板,进入网站配置列表,找到需要配置的网站
2、点击设置—》反向代理
3、添加反向代理,然后就ok了
Apache环境:
Apache不提供内容替换
Nginx环境:
本地怎么配置,建议线上怎么进行配置
假设接口的地址是:http://www.hou.com/api/index/index
代理名称:可以随便起,尽量跟代理目录一致
代理目录:打开高级功能会显示,就是域名后面的/api
目标URL:http://www.hou.com/api
发送域名:会自动生成
内容替换:跟本地的一样,用于替换
如有问题,见上面的常见问题
修改Apache
Apache不提供内容替换
1. 修改Apache安装目录下的/conf/httpd.conf
;如果是宝塔面板直接这里修改:
宝塔面板目录:根目录/www/server/apache/conf/httpd.conf;
本地小皮面板:安装目录\Extensions\Apache2.4.39\conf\httpd.conf;
2. 分别找到这两行,把前面的注释(#)去掉,启用代理
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so
3. 找到/www/server/panel/vhost/apache
目录下的www.qian.cn.conf
宝塔面板目录:根目录/www/server/panel/vhost/apache;
本地小皮面板:安装目录\Extensions\Apache2.4.39\conf\vhosts;
添加如下代码:
#PROXY-START/api
<IfModule mod_proxy.c>
ProxyRequests on
SSLProxyEngine on
ProxyPass /api https://www.hou.com/api
ProxyPassReverse /api https://www.hou.com/api
</IfModule>
#PROXY-END/api
4. 保存并重启Apache
修改Nginx配置
1. 修改Nginx安装目录下的/conf/nginx.conf
;如果是宝塔面板直接这里修改:
宝塔面板目录:根目录/www/server/nginx/conf;
本地小皮面板:安装目录\Extensions\Nginx1.15.11\conf;
2. 找到/www/server/panel/vhost/nginx
目录下的www.qian.cn.conf
宝塔面板目录:根目录/www/server/panel/vhost/nginx;
本地小皮面板:安装目录\Extensions\Nginx1.15.11\conf\vhosts;
添加如下代码
# 代理名称
location /api
{
# 目标url
proxy_pass https://www.hou.com;
# 发送域名
proxy_set_header Host www.hou.red;
#内容替换
sub_filter "/api" "";
}
3. 保存并重启Nginx
配置建议
一下几种场景
1、项目只有一个接口地址
按照上面的进行配置即可
2、项目有多个接口地址,地址的域名不一样,但接口都是api模块
本地开发环境配置:
proxy:{
'/api':{
target:'https://域名1/api',
pathRewrite: {
'^/api': ''
}
},
'/pcapi':{ // 不要起api2,不然还是会被前面的api识别
target:'http://域名2/api',
pathRewrite: {
'^/pcapi': ''
}
}
}
使用:
created(){
axios({
url:"/api/index/index"
}).then((res)=>{
console.log(res);
})
axios({
url:"/pcapi/index/index"
}).then((res)=>{
console.log(res);
})
},
服务器配置代理:
其他配置参考上面
# 代理名称
location /api
{
# 目标url
proxy_pass https://域名1/api;
# 发送域名
proxy_set_header Host travel.qhynice.top;
#内容替换
sub_filter "/api" "";
}
# 代理名称
location /pcapi
{
# 目标url
proxy_pass http://域名2/api;
# 发送域名
proxy_set_header Host wxmall.kuxia.top;
#内容替换
sub_filter "/pcapi" "";
}
3、项目有多个接口地址,域名相同但模块不同
比如接口地址:
https://www.fuwuqi.cn/api/index/index
https://www.fuwuqi.cn/pcapi/index/index
本地开发环境配置:
proxy:{
'/api':{
target:'https://域名/api',
pathRewrite: {
'^/api': ''
}
},
'/pcapi':{
target:'http://域名/pcapi',
pathRewrite: {
'^/pcapi': ''
}
}
}
使用:
created(){
axios({
url:"/api/index/index"
}).then((res)=>{
console.log(res);
})
axios({
url:"/pcapi/index/index"
}).then((res)=>{
console.log(res);
})
},
服务器分享代理:
其他配置参考上面
# 代理名称
location /api
{
# 目标url
proxy_pass https://域名/api;
# 发送域名
proxy_set_header Host travel.qhynice.top;
#内容替换
sub_filter "/api" "";
}
# 代理名称
location /pcapi
{
# 目标url
proxy_pass http://域名/pcapi;
# 发送域名
proxy_set_header Host wxmall.kuxia.top;
#内容替换
sub_filter "/pcapi" "";
}
一些常见问题
后面的配置以后如果出现问题,先看看这里有没有一些常见的错误
1、要不要配置重写路径
取决于你的路径中需不需要,比如:
1、配置文件中写的是https://www.fuwuqi.cn/api,使用接口处写的是/api/register,这样拼接的是https://www.fuwuqi.cn/api/api/register,多了一个/api,这样就需要重写路径,把其中一的替换成空字符串
2、配置文件中写的是https://www.fuwuqi.cn,使用接口处写的是/api/register,这样拼接的是https://www.fuwuqi.cn/api/register,地址正好,就不需要了
3、如果两个不同域名地址的接口都是/api,那配置的时候其中一个就要配置成/api2,但地址上是/api,这就需要用到它,将/api2替换成/api,保证地址的正确性
总结一句话:自己去拼接一下,看看最后得到的返回对不对
2、配置后接口报错404
一般情况下是地址配置错了,从以下几个方面去找:
1、先确定接口有没有问题,用postman等进行测试
2、检查你的地址有没有写错,像配置那里的域名,使用那里的地址
3、检查你的配置项,看看是不是路径重写那里配置错了,见上面的问题1
3、上面两点都没问题,代理还是不生效
重启项目!!!
让配置项加载进去
4、出现请登录等提示
以thinkPHP为例,接口地址是:https://www.fuwuqi.cn/api/index/index
这中间的api是指的api模块
thinkPHP中地址访问是需要添加后面的模块地址的,否则直接访问域名就是admin模块,而admin一般是后台管理的,需要进行登录,所以你才会见到返回请登录
解决方法:1、配置处不直接写域名,改为域名/api,比如https://www.fuwuqi.cn/api
2、将重写路径打开,让它见多的/api替换掉