axios 请求跨域问题

文章目录

  • [1. 使用场景](#1. 使用场景)
  • [2. 解决办法](#2. 解决办法)

1. 使用场景

① 编写后端测试接口,Vue-CLI 的默认端口为 8080,所以为避免端口冲突,我们后端的端口号换成 8081。

② 前端通过 axios 向后端服务发起请求。

html 复制代码
<script>
import axios from 'axios'
export default {
  created() {
    axios({
      url: 'http://localhost:8081/api1/test',
      params: {
        id: 1
      }
    }).then(res => {
      console.log(res)
    })
  }
}
</script>

③ 发起请求,发现前端报错。

本质上,前端的端口是 8080,而后端的端口是 8081,域名不一样,它们是无法进行正常交流的,自然就会报错,这时候就涉及到请求跨域的问题。

2. 解决办法

在后端接口中添加允许跨域的注解,表示允许 8080 向该服务发起请求。

javascript 复制代码
@CrossOrigin(value = "http://localhost:8080")
相关推荐
IT_陈寒21 分钟前
React 性能优化:5个实战技巧让首屏加载提升50%,开发者亲测有效!
前端·人工智能·后端
rising start38 分钟前
前端基础一、HTML5
前端·html·html5
鬼谷中妖1 小时前
JavaScript 循环与对象:深入理解 for、for...in、for...of、不可枚举属性与可迭代对象
前端
大厂码农老A1 小时前
你打的日志,正在拖垮你的系统:从P4小白到P7专家都是怎么打日志的?
java·前端·后端
im_AMBER1 小时前
CSS 01【基础语法学习】
前端·css·笔记·学习
DokiDoki之父1 小时前
前端速通—CSS篇
前端·css
pixle01 小时前
Web大屏适配终极方案:vw/vh + flex + clamp() 完美组合
前端·大屏适配·vw/vh·clamp·终极方案·web大屏
ssf19871 小时前
前后端分离项目前端页面开发远程调试代理解决跨域问题方法
前端
@PHARAOH1 小时前
WHAT - 前端性能指标(加载性能指标)
前端
尘世中一位迷途小书童1 小时前
🎨 SCSS 高级用法完全指南:从入门到精通
前端·css·开源