m0_64123291 2024-06-19 09:37 采纳率: 50%
浏览 6

前端调用后端接口显示连接不到指定的后端端口

前端调用后端接口显示连接不到指定的后端端口

后端Stafflogincontroller类

package com.controller;


import com.service.StaffLoginService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/StaffLogin")
public class StaffLoginController {

    @Autowired
    public StaffLoginService staffLoginService;

    @PostMapping("/login")
    @CrossOrigin
    public boolean login(@RequestParam int employee_id,@RequestParam String password) {
        // 检查id是否存在
        if (staffLoginService.getStaffID(employee_id)) {
            // 如果id存在,则看看数据库里面的密码与输入的密码是否匹配
            return staffLoginService.getStaffPasswordTest(employee_id, password);
        }
        // 如果输入的id不存在就返回false
        return false;
    }
}


前端测试接口页面


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>

<input type="button" value="登录测试" onclick="get()">
</body>
<script>
    function get(){
        axios({
            method:"post",
            url:"http://localhost:8080/StaffLogin/login",
             data: {
            employee_id: '12345',
                password: '12345'
        }
        }).then(function (resp){
            alert(resp.data);
        });
    }
</script>
</html>

我用post测试这个接口方法是可以正常运行的

img

img

但是不论是在vscode里面还是在idea里面运行前端测试页面都显示连接不到指定的后端方法接口

img

  • 写回答

1条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2024-06-19 09:37
    关注

    引自免费微信小程序:皆我百晓生

    从你提供的信息来看,后端接口在Postman中可以正常工作,但是在前端页面中尝试调用时出现了net::ERR_CONNECTION_REFUSED错误,这通常意味着前端页面未能成功连接到后端服务器。以下是一些可能的原因及解决方案:

    1. 确认后端服务正在运行

    确保你的后端服务(例如Spring Boot应用)正在运行并且监听在正确的端口上(通常是8080)。可以通过命令行工具检查服务状态,比如在Linux或Mac系统中使用lsof -i :8080(对于Windows,可以使用netstat -ano | findstr :8080)查看是否有进程正在监听8080端口。

    2. 检查前端请求的URL

    在前端页面中,你使用了http://localhost:8080/StaffLogin/login作为请求的URL。请确认后端服务的确运行在localhost:8080上,并且路径/StaffLogin/login是正确的。同时,检查前后端的协议是否一致,即如果后端使用HTTPS,前端也应使用HTTPS进行请求。

    3. CORS策略

    你已经在后端控制器中添加了@CrossOrigin注解,但可能需要进一步配置CORS策略。在Spring Boot中,可以全局配置CORS,而不是仅在控制器级设置。可以在application.propertiesapplication.yml文件中添加以下配置,或者创建一个配置类来处理CORS:

    # application.yml
    server:
      port: 8080
    spring:
      mvc:
        cors:
          registration:
            allowed-origins: ["*"]
            allowed-methods: ["GET", "POST", "PUT", "DELETE"]
            allowed-headers: ["*"]
            allow-credentials: true
    

    或者配置类方式:

    @Configuration
    public class WebConfig implements WebMvcConfigurer {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")
                    .allowedOrigins("*")
                    .allowedMethods("GET", "POST", "PUT", "DELETE")
                    .allowedHeaders("*")
                    .allowCredentials(true);
        }
    }
    

    4. 前端环境问题

    如果你在本地开发环境中遇到问题,可能是由于跨域限制。浏览器出于安全考虑,会阻止不同源之间的请求。确保你在本地运行前端服务时,前端服务的地址和端口与后端服务的地址和端口相匹配,或者正确设置了CORS。

    5. 检查防火墙设置

    确保没有防火墙规则阻止了本地8080端口的通信。你可能需要检查操作系统的防火墙设置,或者如果有使用虚拟机或容器,也要检查其网络设置。

    6. 代码细节检查

    检查你的前端代码中的axios请求,确保没有语法错误或逻辑错误。虽然你已经给出了代码示例,但在实际开发中,有时候小的拼写错误或遗漏也会导致问题。

    以上步骤应该能帮助你解决当前遇到的问题。如果问题仍然存在,建议进一步检查日志输出,看看是否有更详细的错误信息可以帮助定位问题。

    评论 编辑记录

报告相同问题?

问题事件

  • 创建了问题 6月19日

悬赏问题

  • ¥15 java代码写在记事本上后在cmd上运行时无报错但又没生成文件
  • ¥15 关于#python#的问题:在跑ldsc数据整理的时候一直抱这种错误,要么--out识别不了参数,要么--merge-alleles识别不了参数(操作系统-linux)
  • ¥15 PPOCRLabel
  • ¥15 混合键合键合机对准标识
  • ¥100 现在不懂的是如何将当前的相机中的照片,作为纹理贴图,映射到扫描出的模型上
  • ¥15 魔霸ROG7 pro,win11.息屏后会显示黑屏,如图,如何解决?(关键词-重新启动)
  • ¥15 有没有人知道这是哪里出了问题啊?要怎么改呀?
  • ¥200 C++表格文件处理-悬赏
  • ¥15 Windows Server2016本地登录失败
  • ¥15 复合卡卡号轨道写入芯片卡