We‘re sorry but XXX doesn‘t work properly without JavaScript enabled.

  • 这个问题出现在部署前后端分离项目时,前端访问后端接口出现的错误(Vue+SpringBoot)
  • 找了很多出现同样问题的博客得到三种解决方法

    1.修改前端Vue项目路由文件中mode属性值修改为hash(原本为history)

  • 文件路径为src/router/index.js
  • const router=new  Router({
      mode: 'hash',    //把history修改为hash
      base: process.env.BASE_URL,
      routes
    })

    2.在vue.config.js文件中加上 (publicPath:'/',)

    // 跨域配置
    module.exports = {
        publicPath:'/',  这里加上这个
        devServer: {                //记住,别写错了devServer//设置本地默认端口  选填
            port: 80,
            proxy: {                 //设置代理,必须填
                '/api': {              //设置拦截器  拦截器格式   斜杠+拦截器名字,名字可以自己定
                    target: 'http://自己服务器的ip地址:8080',     //代理的目标地址 
                    changeOrigin: true,              //是否设置同源,输入是的
                    pathRewrite: {                   //路径重写
                        '^/api': ' '                     //选择忽略拦截器里面的内容
                    }
                }
            }

    3.修改Nginx里的配置文件nginx.conf

    worker_processes  1;
    events {
        worker_connections  1024;
    }
    http {
        include       mime.types;
        default_type  application/octet-stream;
        sendfile        on;
        keepalive_timeout  65;
        server {
            listen       80;
            server_name  localhost;
            location / {
                root   /usr/share/nginx/html;
                try_files $uri $uri/ /index.html last;
                index  index.html index.htm;
            }
    
          	#如果你前项目中加了代理,那么就得加上这个
            location ^~ /api/ {    #注意这里得写对
                proxy_pass http://自己服务器的地址:8080/; #后端服务的地址和端口号
            }
    
    
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
        }
    }

    我的问题:我一开始 写的是 这种,发现没,少了个'/',然后这个符号是我噩梦的开始,搞了好几天才发现到

    location ^~ /api {
    	proxy_pass http://自己服务器的地址:8080/;   #后端服务的地址和端口号
    } 
    //vue.config.js
    
    module.exports = {
        publicPath:'/',
        devServer: {                
            port: 80,
            proxy: {              
                '/api': {              //
                    target: 'http://服务器地址:8080',     //代理的目标地址 localhost
                    changeOrigin: true,              //是否设置同源,输入是的
                    pathRewrite: {                   //路径重写
                        '^/api': ' '                     //选择忽略拦截器里面的内容  (这里得主要下有的是  '^/api': '/' )
                    }
                }
            }
    //utils/request.js
    
    const service = axios.create({
        timeout: 5000,
        baseURL: '/api',  //这里也得注意,看看有没有写成'/api/'
        withCredentials: true
    });

    总结:1,2种都试了没效果,第三种有效果,注意路径和匹配规则得写对,希望对你有帮助

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
"We're sorry but ryeduompc doesn't work properly without JavaScript enabled. Please enable it to continue" 是一个常见的错误信息,意思是在没有启用JavaScript的情况下,该应用程序无法正常工作。这个错误通常出现在使用单页应用(SPA)框架如Vue.js时,因为SPA需要通过JavaScript来渲染页面和处理用户交互。 通常情况下,解决这个问题的方法是确保JavaScript在浏览器中是启用的。您可以在浏览器设置中找到并启用JavaScript选项。如果您已经启用了JavaScript但仍然遇到此错误,请尝试清除浏览器缓存并重新加载页面。 这个错误也可能与部署环境有关。如果您的Vue项目打包发布到了nginx服务器上并遇到了这个问题,有几个可能的解决方法。首先,确保您的nginx服务器已正确配置,并且支持处理Vue的路由和JavaScript文件。其次,您可以检查您的Vue项目的配置文件(如vue.config.js)是否正确设置了publicPath和代理配置,以确保应用可以正确访问接口。 总之,解决"We're sorry but ryeduompc doesn't work properly without JavaScript enabled. Please enable it to continue"错误的方法包括启用浏览器中的JavaScript选项,清除浏览器缓存,确保服务器和Vue项目的配置正确设置。希望这些方法对您有帮助。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Vue防止白屏添加首屏动画的实例](https://download.csdn.net/download/weixin_38741540/14829573)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [We‘re sorry but XX doesn‘t work properly without JavaScript enabled. Please enable it to continue](https://blog.csdn.net/weixin_44067333/article/details/121543917)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值