使用宝塔面板配置反代并解决跨域CORS问题 | 青训营笔记

用户8341855043887
2,855 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的第3天

前言

在本次青训营活动中，我们组选择的项目是仿掘金官网。其中，横跨在前后端之间的有一座大桥——“CORS”（跨源资源共享）。

什么是CORS呢？MDN上这样说：

跨源资源共享 (CORS)（或通俗地译为跨域资源共享）是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它 origin（域，协议和端口），使得浏览器允许这些 origin 访问加载自己的资源。

为什么用“一座大桥”来形容呢？这是因为出于安全性，浏览器限制脚本内发起的跨源 HTTP 请求。譬如如果运行在 https://domain-a.com 的 JavaScript 代码使用 XMLHttpRequest 来发起一个到 https://domain-b.com/data.json 的请求的话，除非响应报文中的header包含了正确 CORS 响应头，否则会因为安全问题无法访问。

具体应该包含哪些header头呢？请参见跨源资源共享（CORS） - HTTP | MDN (mozilla.org)

解决的方案也很简单，只要让服务器后端返回来的请求都带上这些header头即可。下面分享如何在宝塔面板中配置反代并解决跨域问题。

配置反代

假设：服务器上的8088端口运行着后端服务，但是我想把这个8088端口隐藏起来，通过服务器80端口来访问服务，这个时候就可以使用反代解决。

注：下面的演示部分使用宝塔面板英文版aaPanel进行，对应的位置其实和宝塔面板都是一样的~

第一步：打开宝塔面板，左边栏网站->添加站点

截图_20220829194851.png

第二步：在添加站点页面根据需要输入自己的域名/IP等

截图_20220829195010.png

第三步：点击新建站点的设置按钮

截图_20220829195132.png

第四步：点击反代标签，并添加反代

截图_20220829195241.png

第五步：根据需要设置反代配置，这里我需要反代本地的8088端口，所以目标url填写http://127.0.0.1:8088

截图_20220829195358.png

至此反代已经配置完毕。

在反代的基础上配置CORS

假设：服务器上装的是Nginx

首先，我们需要大致了解Nginx配置文件的结构：

（这里安利下大佬的Nginx一小时入门教程，常用的配置里面都有啦~nginx一小时精讲课程 · 语雀 (yuque.com)）

http {

  server{#虚拟主机
    listen 8000;
    server_name localhost:
    
    location / {
      root /home/html/wwwroot;
    }
      
  }

}

通常的Nginx配置文件分为3大段：http>server>location

每一个server代表一个虚拟主机，其下的listen规定了监听端口，server_name（简单来说）会和绑定的域名进行匹配； location会匹配访问目录，访问其内部规定的资源。

所以我们接下来要找到反代对应的配置文件藏在了哪里，然后在其对应的location中加入配置文件。

点击左边栏网站,打开对应站点的设置

截图_20220829195132.png

点击配置文件，出现下图所示的代码框。在其中寻找其所include的设置反代的文件。 我这里是/www/server/panel/vhost/nginx/proxy/域名/*.conf

截图_20220829200922.png

接下来找到这个文件，双击打开它：

截图_20220829201249.png

可以看到确实是在这个配置文件中的location里面设置了反代：

截图_20220829201334.png

我们在整个location的末尾，但是}之前，加入如下的配置：

    set $enable_cors 0;
    if ( $enable_cors = 0 )
    {
    #CORS 配置
    add_header 'Access-Control-Allow-Origin' '*';
  	add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
	#是否允许cookie传输
    add_header 'Access-Control-Allow-Credentials' 'true';
	add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Data-Type,X-Requested-With,X-Data-Type,X-Auth-Token';
    }
    
    
    #针对浏览器的options预请求直接返回200，否则会被403 forbidden--invalie CORS request
    if ( $request_method = 'OPTIONS' ) { 
    #CORS 配置
    add_header 'Access-Control-Allow-Origin' '*';
  	add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
	 #是否允许cookie传输
    add_header 'Access-Control-Allow-Credentials' 'true';
	add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Data-Type,X-Requested-With,X-Data-Type,X-Auth-Token';
	return 200;
	}

截图_20220829201545.png

然后按Ctrl+S保存一下~

笔者目前用的这个版本的宝塔还算挺智能，保存后会自动重启Nginx。如果发现配置文件不生效，有可能是没有重启Nginx的原因。

重启方式：

截图_20220829201831.png

截图_20220829201924.png

希望对大家有所帮助^_^，如有不足请指出

avatar
文章
阅读
粉丝