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

Question

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);

Answer 1

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

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

Answer 2

这个错误 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项目实际运行的端口。

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

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