问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Vue项目中axios请求根地址报错 Failed to load resource: net::ERR_CONNECTION_REFUSED如何解决？

头像
一直单身的铁链
    11
    新手上路，请多包涵

    vue运行项目请求axios根地址爆出错误。我的登录页面可以进去，但是输入账号密码后，点击登录按钮，但是没有反应。

        
    Failed to load resource: net::ERR_CONNECTION_REFUSED

    Uncaught (in promise) Error: Network Error

    at createError (createError.js:16:1)
at XMLHttpRequest.handleError (xhr.js:117:1)

    我尝试修改我的服务器地址和前端请求根路径。但是之后爆出404。这个问题困扰了我两天。下面附上我的端口截图
    前端挂载请求根路径

    Vue.prototype.$http = axios
// 设置请求的根路径
axios.defaults.baseURL = "http://localhost:8081"
Vue.config.productionTip = false

    这是后端服务器端口
    server:
    port: 8081

    这是后端跨域请求
    registry.addMapping("/**")
    // .allowedOrigins("*","null")

                .allowedOrigins("Http://localhost:8081","null")
            .allowedMethods("Get","POST","PUT","OPTIONS","DELETE")
            .allowCredentials(true)
            .maxAge(3600);
    vue.jsaxiosspringboot
    阅读 3.4k
    avatarAI BotBETA

    这个错误 Failed to load resource: net::ERR_CONNECTION_REFUSED 通常意味着你的浏览器尝试连接到指定的地址和端口，但是连接被拒绝了。这可能是由于多种原因造成的，下面是一些可能的解决方案：

    1. 确认后端服务已启动：
      确保你的后端服务（在这个例子中是运行在 http://localhost:8081 的服务）已经启动，并且正在监听8081端口。你可以通过命令行或日志来检查这一点。
    2. 检查防火墙和安全组设置：
      有时，防火墙或安全组设置可能会阻止本地或远程连接。确保你的防火墙或安全组设置允许从你的前端应用（运行在Vue项目中的）到你的后端服务的连接。

    3. 检查跨域配置：
      你提供的跨域配置中，allowedOrigins 的值似乎有一个错误。它应该是 http:// 而不是 Http://（注意大小写）。另外，通常不需要将 "null" 作为允许的来源。尝试以下配置：

      registry.addMapping("/**")
        .allowedOrigins("http://localhost:8080") // 假设你的Vue项目运行在8080端口
        .allowedMethods("GET", "POST", "PUT", "OPTIONS", "DELETE")
        .allowCredentials(true)
        .maxAge(3600);

    注意：你的Vue项目可能运行在不同的端口上，比如8080（这是Vue CLI的默认开发服务器端口）。请确保将 allowedOrigins 设置为你的Vue项目实际运行的端口。

    1. 检查前端请求：
      确保你的前端请求（通过axios）使用了正确的URL和端口。在你的代码中，你已经设置了 axios.defaults.baseURL = "http://localhost:8081"，这是正确的，只要你的后端服务正在该地址上运行。
    2. 检查网络请求和响应：
      使用浏览器的开发者工具（通常通过按F12或右键点击页面上的元素并选择“检查”来访问）来查看网络请求的详细信息。这可以帮助你了解请求是否发送到了正确的地址和端口，以及服务器的响应是什么。
    3. 查看后端日志：
      查看你的后端服务的日志，以了解是否有任何关于接收到的请求或错误的详细信息。
    4. 检查Vue路由和事件处理：
      由于你提到点击登录按钮后没有反应，这也可能是Vue路由或事件处理的问题。确保你的登录按钮正确地绑定了点击事件处理器，并且该处理器正在尝试发送axios请求。
    5. 确保没有其他服务占用该端口：
      使用如 netstat -ano | findstr :8081（在Windows上）或 lsoft -i :8081（在Linux或Mac上）的命令来检查是否有其他服务已经占用了8081端口。

    如果上述步骤都不能解决问题，请尝试逐步调试你的代码，并查看每一步的输出和日志，以找出问题的根源。

    2 个回答
    得票最新
    头像
    寸寸青丝愁华年
      730114

      我看你的后端配置
      你先修改一下

      1. URL 协议 改成小写 http
      2. allowedMethods 全部改成大写
        可以先尝试将allowedOrigins修改成*通配符进行测试，看是否与上述两点存在影响
      头像
      肥皂泡
        38274057

        ERR_CONNECTION_REFUSED，就是访问不到。404最起码是可以访问服务器的
        光看代码没用的，前后端是否同一台服务器部署（不跨域），是否走了nginx代理，这些都不知道
        还有，allowedOrigins("Http://localhost:8081","null")，你这只是允许和后端相同ip的8081端口访问。localhost是指向127.0.0.1的

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题