前提条件:软件环境
- 高德地图VUE组件:@amap/amap-jsapi-loader
- 本地开发系统:win
- ECS系统:ubt
问题1
问题描述
在本地测试成功(http://localhost:8080),部署后定位失败(http://ip:8080),,将代码部署到ECS上出现了以下问题:Only secure origins are allowed (see: https://permanently-remo....
解决办法
这个问题是高德地图使用浏览器定位,目前大部分浏览器已经禁止了非https协议下的定位请求,需要将应用升级为https。
通过nginx升级到https,并将443端口映射到8080端口
安装nginx
sudo apt install nginx
在/etc/nginx/下创建ssl目录用于存放证书
- 安装 OpenSSL(如果系统中没有安装)
sudo apt install openssl
- 生成私钥:
openssl genrsa -out /etc/nginx/ssl/your_private_key.key 2048
这将生成一个 2048 位的 RSA 私钥,并保存到指定路径。
3. 生成证书签名请求(CSR):
openssl req -new -key /etc/nginx/ssl/your_private_key.key -out /etc/nginx/ssl/your_csr.csr
在生成 CSR 的过程中,你需要回答一些问题,如国家代码、地区、组织名称等。这些信息将包含在证书中。
4. 生成自签名证书:
openssl x509 -req -days 365 -in /etc/nginx/ssl/your_csr.csr -signkey /etc/nginx/ssl/your_private_key.key -out /etc/nginx/ssl/your_certificate.crt
这将生成一个自签名证书,有效期为 365 天。
配置 Nginx 使用 HTTPS
- 打开 Nginx 配置文件
sudo nano /etc/nginx/sites-available/default
- 在
server
块中添加以下内容
server {
listen 443 ssl;
server_name your_domain.com; # 替换为你的域名
ssl_certificate /etc/nginx/ssl/your_certificate.crt;
ssl_certificate_key /etc/nginx/ssl/your_private_key.key;
# 其他配置:转发到8080端口
location / {
proxy_pass http://localhost:8080;
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;
}
}
问题2
问题描述
chunk-vendors.js:238 Mixed Content: The page at 'test' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://192.168.0.208:8080/ws'. This request has been blocked; this endpoint must be available over
该问题是:nginx代理的https页面中加载的内容使用的http协议导致报错。
解决办法
在nginx的server -location 的配置中增加
add_header Content-Security-Policy "upgrade-insecure-requests"; 将http协议升级为https。
server {
listen 443 ssl;
server_name your_domain.com; # 替换为你的域名
ssl_certificate /etc/nginx/ssl/your_certificate.crt;
ssl_certificate_key /etc/nginx/ssl/your_private_key.key;
# 其他配置:转发到8080端口
location / {
proxy_pass http://localhost:8080;
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;
add_header Content-Security-Policy "upgrade-insecure-requests";
}
}