进行 javaScript 调用以使用在 localhost 上运行的 REST API

Posted 2023-03-04

【中文标题】进行 javaScript 调用以使用在 localhost 上运行的 REST API

【英文标题】：make a javaScript call to consume REST API running on localhost

【发布时间】：2020-08-07 21:18:04

【问题描述】：

我有一个 java-springboot 微服务在端口 8080 和 localhost 服务器上运行。它看起来像这样：

@RequestMapping("/user")
@RestController
public class UserController 

    @Autowired
    UserService userService;

    @RequestMapping(method = RequestMethod.GET, value = "")
    public User getUser() 
        return userService.getUser();
    

我正在尝试使用调用“http://localhost:8080/user”访问用户数据。通过浏览器和 Postman 对其进行测试时，调用正在返回数据。但是使用 javacript 它返回一个空响应。

我是 js 的新手。

我的 javascript 代码如下所示：

function getCurrentUser()

    try
    
        var userUrl = "http://127.0.0.1:8080/user";
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() 
            try
            
                if (this.readyState == 4 ) 
                    var response = this.responseText;
                    document.getElementById("idCurrentName").innerhtml = response;              
                
            
            catch(erMs)
            
                document.getElementById("idCurrentName").innerHTML = erMs;
            
        ;
        xhttp.open("GET", userUrl, true);
        xhttp.setRequestHeader('Content-Type', 'text/plain');
        xhttp.send();
    
    catch(erMsg)
    
        document.getElementById("idCurrentName").innerHTML = erMsg;
    

请帮助访问 loclhost 上的数据。 谢谢！！

【问题讨论】：

首先，检查您的浏览器控制台。您可能会在其中找到一条错误消息，指出此请求已被阻止，因为在响应中未设置 Access-Control-Allow-Origin 标头。如果是这种情况 - 然后阅读 CORS。

【参考方案1】：

这个问题实际上与 CORS 有关。我最初添加了一个 chrome 浏览器扩展，但是当我在后端使用 SpringBoot 进行服务时，我在我的 RestController 上添加了注释 @CrossOrigin。这解决了 CORS 问题。

希望对你有帮助。

后端代码现在如下所示：

@CrossOrigin
@RequestMapping("/user")
@RestController
public class UserController 

    @Autowired
    UserService userService;

    @RequestMapping(method = RequestMethod.GET, value = "")
    public User getUser() 
        return userService.getUser();