后端在本地运行地址是localhost:8080,前端也在本地运行,要怎么请求后端接口(学习笔记)

后端在本地运行地址是localhost:8080,前端也在本地运行,要怎么请求后端接口(学习笔记)

码农世界 2024-06-05 前端 132 次浏览 0个评论

前端请求方法: 

load () {
  console.log('load加载数据列表')
  // 发起 GET 请求
  axios.get('http://localhost:8080/carbon')
    .then(function (response) {
      // 请求成功时处理
      console.log(response.data)
    })
    .catch(function (error) {
      // 请求失败时处理
      console.log('请求失败')
      console.log(error.message)
      console.log(error)
    })
},

在apipost中请求后端只需要发送GET请求 localhost:8080/carbon,前端请求浏览器报错:

已拦截跨源请求:同源策略禁止读取位于 http://localhost:8080/carbon 的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')。状态码:200

错误表明您的前端应用试图从 http://localhost:8080/carbon 获取资源,但由于跨源资源共享(CORS)策略的限制,请求被浏览器拦截了。尽管您收到了一个状态码为 200 的响应,这意味着服务器实际上成功地处理了请求并返回了数据,但浏览器因为缺少适当的 CORS 头而不会将响应数据暴露给前端 JavaScript 代码。

解决方法:在 Spring Boot 中,可以使用 @CrossOrigin 注解在方法或类级别上启用 CORS。这个注解可以放在 Controller 类或方法上。

import org.springframework.web.bind.annotation.CrossOrigin;  
import org.springframework.web.bind.annotation.GetMapping;  
import org.springframework.web.bind.annotation.RestController;  
  
@RestController  
public class MyController {  
  
    @CrossOrigin(origins = "http://localhost:8081")  // 前端启动后运行的地址
    @GetMapping("/carbon")  
    public String carbon() {  
        return "Carbon Data";  
    }  
}

转载请注明来自码农世界,本文标题:《后端在本地运行地址是localhost:8080,前端也在本地运行,要怎么请求后端接口(学习笔记)》

百度分享代码,如果开启HTTPS请参考李洋个人博客
每一天,每一秒,你所做的决定都会改变你的人生!

发表评论

快捷回复:

评论列表 (暂无评论,132人围观)参与讨论

还没有评论,来说两句吧...

Top