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

作者 : admin 本文共985个字,预计阅读时间需要3分钟 发布时间: 2024-03-5 共2人阅读

前端请求方法: 

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,前端也在本地运行,要怎么请求后端接口(学习笔记)
E-->