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")
相关推荐
zwjapple5 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20207 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem8 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊8 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术8 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理8 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing8 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止9 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall9 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴9 小时前
简单入门Python装饰器
前端·python