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

Posted SoSalty

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了宝塔面板使用Nginx反向代理解决跨域问题,超简单!!相关的知识,希望对你有一定的参考价值。

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

        步入主题——

目标:请求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 webmaster@example.com
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

以上是关于宝塔面板使用Nginx反向代理解决跨域问题,超简单!!的主要内容,如果未能解决你的问题,请参考以下文章

宝塔面板配置 vue生产环境和开发环境 反向代理---Nginx+Apache解决方案

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

宝塔面板反向代理快速设置

Vue Nginx反向代理配置 解决生产环境跨域

最简单实现跨域的方法:使用nginx反向代理

Nginx 反向代理解决浏览器跨域问题