VUE开发高德地图应用 遇到的问题及解决方案

前提条件：软件环境

1. 高德地图VUE组件：@amap/amap-jsapi-loader
2. 本地开发系统:win
3. 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目录用于存放证书

1. 安装 OpenSSL（如果系统中没有安装）

sudo apt install openssl

1. 生成私钥：

   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

1. 打开 Nginx 配置文件

   sudo nano /etc/nginx/sites-available/default

1. 在 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";
        }
   }