如何处理Vue2项目在HTTPS环境下请求HTTP接口的问题？

Question

使用github部署打包后的vue2静态页面报错

Mixed Content: The page at 'https://rossweisseavalon.github.io/shopping-page/#/home' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://smart-shop.itheima.net/index.php?s=/api/page/detail&pa...'. This request has been blocked; the content must be served over HTTPS.

了解了一下应该是因为在https下请求了http的接口

貌似可以改后端的接口解决，但是接口不是我的，修改了dist文件下的index.html的<meta http-equiv="X-UA-Compatible" content="IE=edge">为<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">并且重新push在了远程仓库，但是不行

Answer 1

这是浏览器行为。

接口是别人的。你可以在你的服务器上nginx反向代理对方接口。否则没戏。

Answer 2

https下只能访问https链接

Answer 3

有两种办法

使用HTTPS代理或者CORS代理服务

1.使用 HTTPS 代理

在服务器上设置 HTTPS 代理，将所有 HTTP 请求转发到 HTTPS，可以确保所有请求都是通过 HTTPS 进行的。使用 Nginx 或其他代理服务器来实现：

server {
    listen 443 ssl;
    server_name yourdomain.com;

    ssl_certificate /path/to/your/certificate.crt;
    ssl_certificate_key /path/to/your/private.key;

    location /api/ {
        proxy_pass http://smart-shop.itheima.net;
        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.使用 CORS 代理服务

如果无法设置自己的代理服务器，可以使用公共的 CORS 代理服务来中转请求。例如，使用 https://cors-anywhere.herokuapp.com/：

axios.get('https://cors-anywhere.herokuapp.com/http://smart-shop.itheima.net/index.php?s=/api/page/detail&pa...')
  .then(response => {
    console.log(response.data);
  });