解决配置SSL证书后前端不能通过http请求后台服务器

环境描述：

• 我的后端服务运行在7777端口
• 因为前端已经配置了SSL证书以及http跳转https，所以前端网页向后端服务器发送的http请求不能成功发送，以及可能会出现的跨域问题
• 原来的前端请求数据是直接发送请求到7777端口

解决思路：

• 前端网页发送网络请求时添加一个同一前缀，如 itreourceapi
• 请求发送至443端口，由nginx进行处理
• nginx匹配 itreourceapi前缀，进行去除，并转发请求到7777端口

前端vue中axios配置

这里配置baseURL是的所有请求都加上了 itresourceapi 前缀

 const BASEURL = "https://我的域名/itresourceapi";

const instance = axios.create({
    baseURL: BASEURL,
});

nginx处理

server {
	     #SSL 默认访问端口号为 443
	     listen 443 ssl; 
	     #请填写绑定证书的域名
	     server_name 你自己的域名; 
	     #请填写证书文件的相对路径或绝对路径
	     ssl_certificate /usr/local/nginx/cert/xxxx.crt; 
	     #请填写私钥文件的相对路径或绝对路径
	     ssl_certificate_key /usr/local/nginx/cert/xxxx.key; 
	     ssl_session_timeout 5m;
	     #请按照以下协议配置
	     ssl_protocols TLSv1.2 TLSv1.3; 
	     #请按照以下套件配置，配置加密套件，写法遵循 openssl 标准。
	     ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE; 
	     ssl_prefer_server_ciphers on;

	     location /itresourceapi {
	        rewrite ^/itresourceapi/(.*)$ /$1 break; # 去除路径中的"/itresourceapi"
	        proxy_pass http://localhost:7777; # 转发到7777端口
		      proxy_set_header Host $host;
		      proxy_set_header X-Real-IP $remote_addr;
		      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		      proxy_set_header X-Forwarded-Proto $scheme;
	    }

 
          location / {
                #网站主页路径。此路径仅供参考，具体请您按照实际目录操作。
                #例如，您的网站主页在 Nginx 服务器的 /etc/www 目录下，则请修改 root 后面的 html 为 /etc/www。
                root html; 
                index  index.html index.htm;
          }
	 }
	 

  #这里配置的是将http请求转发到https
	server {
		 listen 80;
		 #请填写绑定证书的域名
		 server_name 你自己的域名; 
		 #把http的域名请求转成https
		 return 301 https://$host$request_uri; 
	}

配置完成

然后即可实现前端发送请求到443端口，转发到7777端口请求数据了