宝塔面板使用Nginx反向代理解决跨域问题，超简单！！

Posted 2023-04-02 SoSalty

        至于跨域的概念，云服务器、域名的购买，宝塔面板的安装等等就不再过多赘述，有不清楚的可以看看别的教程~

        步入主题——

目标：请求http://api.xxxxxx.com/userinfo获取数据

1.打开面板，点击右侧网站，点击设置：

 2.点击右侧反向代理，点击添加反向代理：

3.（1）开启高级功能；

   （2）填写代理名称（方便记忆即可）；

   （3）代理目录（后面请求时用来代替baseURL）；

   （4）目标URL（请求接口的baseURL ），填好后发送域名会自动填充好

   （5）点击提交

 4.打开软件商店，点击设置：

 5.点击配置修改，在server···中加入如下配置：

        location /apis/ 
          client_max_body_size  100m;
          proxy_connect_timeout    300;
          proxy_read_timeout       300;
          proxy_send_timeout       300;
          proxy_pass http://api.xxxxxx.com;

6.最后在请求的时候使用/apis/作为baseURL就完成了！，如：

axios.get('/apis/userinfo')

宝塔配置vue反向代理Nginx解决

原文链接: https://blog.csdn.net/lhkuxia/article/details/119674392

跨域是什么？

出于浏览器的同源策略限制。

同源策略（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）
如何解决跨域（原理）

通过一些方法设置代理，在请求发送(接收)之前加入中间层，将不同的域名转换成相同的，就解决了跨域的问题。客户端发送请求时，不直接到服务器，而是先到代理的中间层

利用中间者去代理

1、浏览器给中间者发送请求
2、中间者把请求给到服务器
3、服务器发送结果给中间者
4、中间者发送结果给浏览器
1
2
3
4

在这里将http://localhost:8080的这个域名装换为http://localhost:8081,
再将请求发送到服务器,这样在服务器端收到的请求就是使用的http://localhost:8081；
同理，当服务器返回数据的时候，也是先到代理的中间层，
将http://localhost:8081转换成http://localhost:8080，这样在客户端也是在同源下访问的了。

实现-开发环境

假设接口域名为www.fuwuqi.cn。
vue-cli生成的配置文件上的proxyTable
1.在运行的时候，会配置启动一个node服务，这个服务的作用:
1是静态文件服务，让你可以访问到html/js等文件包括监听文件变动等，
2是启动一个http代理，你js发送的请求会请求到这个服务A，由服务A代理到服务B，而服务A和静态文件服务器是同源的，并不影响同源策略。
2.浏览器是没有必要设置CORS的，服务器设置CORS就是为了告知浏览器允许访问我的源，不是跟我同源的，要在浏览器接受到响应后抛出错误。

vue-cli 4之前版本项目

先找到config/index.js,dev对象下的proxyTable中
写法:

proxyTable:
\'/api\':
target: "www.fuwuqi.cn/api", // API服务器的地址
changeOrigin: true, // 如果设置为true,那么本地会虚拟一个服务器接收你的请求并代你发送该请求，这样就不会有跨域问题（只适合开发环境）
pathRewrite:
\'^/api\': \'\' // 重写路径 比如\'/api/aaa/ccc\'重写为\'/aaa/ccc\'


,
1
2
3
4
5
6
7
8
9
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\': \'\'





1
2
3
4
5
6
7
8
9
10
11
12
13
14
3、重启项目，这样的话新建的文件就可以被识别了,一定要重启

基于vite的项目

修改vite.config.js，在defineConfig中添加以下代码

server:
proxy:
\'/api\':
target: \'http://域名/api\',
changeOrigin: true,
rewrite: path => path.replace(/^\\/api/, \'\')



1
2
3
4
5
6
7
8
9
使用

this.$axios.post(\'/api/register\', //最终相当于https://域名/api/register

).then(function (res)
console.log(res);
)
1
2
3
4
5
生产环境

保持前端不动，依旧是代理状态
在项目打包部署后,原来的proxyTable就不能生效了,就需要使用Nginx或Apache进行反向代理;
这次使用的是宝塔面板进行部署项目配置反向代理

假设:

前端项目域名:www.qian.cn
后端项目域名:www.hou.cn
1
2
修改方法 1

1、新建网站，并上传项目
2、点击设置—》反向代理
3、添加反向代理，然后就ok了

假设接口的地址是：http://www.hou.com/api/index/index
代理名称：可以随便起，尽量跟代理目录一致
代理目录：就是域名后面的/api
目标URL：http://www.hou.com/api
发送域名：会自动生成

Apache

1. 修改Apache安装目录下的/conf/httpd.conf;或直接在面板这里修改:

 

2. 分别找到这两行,把前面的注释(#)去掉

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so
1
2
3. 找到/www/server/panel/vhost/apache目录下的www.qian.cn.conf

修改如下

<VirtualHost *:80>
ServerAdmin [e-mail]
DocumentRoot "/www/wwwroot/dist" #项目地址
ServerName 1bb943f9.www.qian.cn
ServerAlias www.qian.cn #前端地址域名
#errorDocument 404 /404.html
ErrorLog "/www/wwwlogs/www.qian.cn-error_log"
CustomLog "/www/wwwlogs/www.qian.cn-access_log" combined
#DENY FILES
<Files ~ (\\.user.ini|\\.htaccess|\\.git|\\.svn|\\.project|LICENSE|README.md)$>
Order allow,deny
Deny from all
</Files>
#添加开始
ProxyRequests off

<Proxy *>
Order deny,allow
Allow from Off
</Proxy>

ProxyPass /api http://www.hou.cn/api # 前面是重新路径,后面是代理到对应的地址
#添加结束
#PHP
<FilesMatch \\.php$>
SetHandler "proxy:unix:/tmp/php-cgi-00.sock|fcgi://localhost"
</FilesMatch>

#PATH
<Directory "/www/wwwroot/dist">
SetOutputFilter DEFLATE
Options FollowSymLinks
AllowOverride All
Require all granted
DirectoryIndex index.php index.html index.htm default.php default.html default.htm
</Directory>
</VirtualHost>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
4. 保存并重启Apache

Nginx

1. 修改Nginx安装目录下的/conf/nginx.conf;或直接在面板这里修改:

 

2. 找到/www/server/panel/vhost/nginx目录下的www.qian.cn.conf

修改如下

server

listen 80;
server_name www.qian.cn;
index index.php index.html index.htm default.php default.htm default.html;
root /www/wwwroot/dist;
#跨域请求数据
location /api
add_header "Access-Control-Allow-Origin" *;
proxy_pass http://www.hou.cn/api;


location @router
rewrite ^.*$ /index.html last;

location /
try_files $uri $uri/ @router;
index index.html;

#SSL-START SSL相关配置，请勿删除或修改下一行带注释的404规则
#error_page 404/404.html;
#SSL-END

#ERROR-PAGE-START 错误页配置，可以注释、删除或修改
#error_page 404 /404.html;
#error_page 502 /502.html;
#ERROR-PAGE-END

#PHP-INFO-START PHP引用配置，可以注释或修改
include enable-php-00.conf;
#PHP-INFO-END

#REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效
include /www/server/panel/vhost/rewrite/www.qian.cn.conf;
#REWRITE-END

#禁止访问的文件或目录
location ~ ^/(\\.user.ini|\\.htaccess|\\.git|\\.svn|\\.project|LICENSE|README.md)

return 404;


#一键申请SSL证书验证目录相关设置
location ~ \\.well-known
allow all;


location ~ .*\\.(gif|jpg|jpeg|png|bmp|swf)$

expires 30d;
error_log /dev/null;
access_log /dev/null;

location ~ .*\\.(js|css)?$

expires 12h;
error_log /dev/null;
access_log /dev/null;

access_log /www/wwwlogs/er.kuxia.top.log;
error_log /www/wwwlogs/er.kuxia.top.error.log;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
3. 保存并重启Nginx