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")
相关推荐
Tom Ma.1 分钟前
使用腾讯云云开发(CloudBase)的云函数,删除云存储中指定目录下的过期文件
前端·javascript·腾讯云
麦麦大数据3 分钟前
F031 Vue+Flask深度学习+机器学习多功能识别系统
vue.js·深度学习·flask
Hilaku15 分钟前
技术、业务、管理:一个30岁前端的十字路口
前端·javascript·面试
Knight_AL23 分钟前
大文件分片上传:简单案例(前端切割与后端合并)
前端·状态模式
雨过天晴而后无语24 分钟前
HTML纯JS添加删除行示例一
前端·javascript·html
IT_陈寒25 分钟前
Vue3性能翻倍秘籍:5个被低估的Composition API技巧让你开发效率飙升🚀
前端·人工智能·后端
袁煦丞26 分钟前
N1+iStoreOS+cpolarN1盒子变身2048服务器:cpolar内网穿透实验室第653个成功挑战
前端·程序员·远程工作
哀木27 分钟前
聊聊 vue2 与 vue3 的 v-model
前端
前端小蜗30 分钟前
🌐 利用Chrome内置 【AI翻译 API】实现国际化
前端·javascript·浏览器
寒月霜华31 分钟前
JaveWeb后端-Web基础-SpringBoot Web、HTTP协议
前端·spring boot·http