vue.js - 前端页面跳转时发生无限循环是为什么？

Question

前端页面渲染前向其他页面跳转，发生无限循环的问题。

import Vue from 'vue'import App from './App.vue'//引入VueRouterimport VueRouter from 'vue-router'import router from './router/index.js'import './assets/style/index.css'import './assets/style/public.css'import './assets/font/font_svcu02nytc/iconfont.css'import './assets/script/js.js'import './assets/script/jquery-3.4.1.min.js'import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import $ from 'jquery'import store from "./store"import Antd from 'ant-design-vue'import 'ant-design-vue/dist/antd.css'Vue.config.productionTip = false//应用插件Vue.use(VueRouter)Vue.use(ElementUI);Vue.use(Antd)// 获取当前页面的协议const currentProtocol = window.location.protocol;// 如果是 HTTPS 协议，则执行跳转逻辑if (currentProtocol === 'https:') {  const temp_url = window.location.href.replace("https","http")  alert("由于服务器暂未配置域名，点击确定后跳转到http协议网址下")  window.location.href = temp_url} else{  // console.log('当前页面使用 HTTPS 协议');  const vm =new Vue({    render: h => h(App),    router,    store  }).$mount('#app')}// const vm =new Vue({//   render: h => h(App),//   router,//   store// }).$mount('#app')

代码如上：
问题背景是这样：我自己的一个云服务器网站还没有域名，只实现了前端的ssl认证，但是没有实现后端的ssl认证，导致前端无法向后端发送https请求。于是我目前打算，当用户通过https协议登录前端网站的时候，自动跳转到http协议下的该网站，具体实现的代码如上面所写，但是部署到云服务器并测试的时候发现网页不断弹出alert框，且一直在当前页面循环。

经过几次尝试，还发现我即使将这段判断的代码放到单独的component下面的mounted方法里，也会出现无限循环，我在本地测试的时候好像没有问题，但是部署到服务器上就有问题了。可能的情况是什么？

nginx的配置如下：

user root;#user  nobody;worker_processes  1;#error_log  logs/error.log;#error_log  logs/error.log  notice;#error_log  logs/error.log  info;#pid        logs/nginx.pid;events {    worker_connections  1024;}http {    include       mime.types;    default_type  application/octet-stream;    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '    #                  '$status $body_bytes_sent "$http_referer" '    #                  '"$http_user_agent" "$http_x_forwarded_for"';    #access_log  logs/access.log  main;    sendfile        on;    #tcp_nopush     on;    #keepalive_timeout  0;    keepalive_timeout  65;    #gzip  on;    server {        listen       80;        server_name  xxx.xxx.xxx.xx;        #charset koi8-r;        #access_log  logs/host.access.log  main;        root /www/dist;        index index.html;        #location / {        #    root   /home/www/dist;        #    index  index.html index.htm;        #}        #location / {        #    try_files $uri $uri/ /index.html; #新的        #}        #error_page  404              /404.html;        # redirect server error pages to the static page /50x.html        #        error_page   500 502 503 504  /50x.html;        location = /50x.html {            root   html;        }        location / {            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404            index  index.html index.htm;        }        location @router {            rewrite ^.*$ /index.html last;        }        # proxy the PHP scripts to Apache listening on 127.0.0.1:80        #        #location ~ \.php$ {        #    proxy_pass   http://127.0.0.1;        #}        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000        #        #location ~ \.php$ {        #    root           html;        #    fastcgi_pass   127.0.0.1:9000;        #    fastcgi_index  index.php;        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;        #    include        fastcgi_params;        #}        # deny access to .htaccess files, if Apache's document root        # concurs with nginx's one        #        #location ~ /\.ht {        #    deny  all;        #}    }    # another virtual host using mix of IP-, name-, and port-based configuration    #    #server {    #    listen       8000;    #    listen       somename:8080;    #    server_name  somename  alias  another.alias;    #    location / {    #        root   html;    #        index  index.html index.htm;    #    }    #}    # HTTPS server    #    server {        listen       443 ssl;        server_name  xxx.xxx.xxx.xx;        ssl_certificate /usr/local/nginx/conf/ssl/ipssl/zenon.crt;        ssl_certificate_key /usr/local/nginx/conf/ssl/ipssl/zenon.key;       # ssl_certificate      cert.pem;       # ssl_certificate_key  cert.key;        root /www/dist;        index index.html;        ssl_session_cache    shared:SSL:1m;        ssl_session_timeout  5m;        ssl_ciphers  HIGH:!aNULL:!MD5;        ssl_prefer_server_ciphers  on;                location / {            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404            index  index.html index.htm;        }        location @router {            rewrite ^.*$ /index.html last;        }    }}

Answer 1

按照你的描述：
本地测试的时候好像没有问题，但是部署到服务器上就有问题了
那我觉得很有可能是服务器做了什么配置，在重定向到http的时候，服务器端可能又将其重定向回 https了。你题目的这个需求我觉得完全可以用nginx来做呀，一个例子:

server {        listen       443 ssl;        # 域名，实际情况下时，将这个改成域名 https://xx.cn，因为你还没有域名，用ip地址即可        server_name  xx.cn;        ssl on;        ssl_session_timeout 5m;                ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #按照这个协议配置                ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;#按照这个套件配置         # 证书位置        ssl_certificate  ssl/server.crt;        ssl_certificate_key ssl/server.key;        location / {            proxy_pass http://xx.cn;#这里的xx.cn 是我们需要转发的 ，配合修改hosts文件 ： 127.0.0.1  xx.cn，也可以直接http://ip地址:端口        }}

ssl证书你可以先自己生成一个自签名的就完事了，等有真正的证书了再替换即可

Answer 2

语法
object.replace(url);
参数
url
DOMString 类型，指定所导航到的页面的 URL 地址。

从MDN文档里面看到只能传一个参数，你为什么传了两个