工业艺术 2022-04-27 18:47 采纳率: 100%
浏览 50
已结题

axios跨域问题导致后端无法发送数据到前端,该怎么解决?

问题遇到的现象和发生背景:
我是大四毕业生,这是我毕设遇到的问题
我的项目有一个前端和一个后端,前端是vite+vue3写的,后端用了Koa的工具
-
前端在接受后端数据的时候,使用的是这行代码:
import { get } from 'axios'; // 依赖的工具是axios
const response = await get(this.testcase.url) // this.testcase.url的内容是http://localhost:8080
-
而后端的完整代码如下,我后端写的比较简单,且前后端分别属于两个不同的项目:
const Koa = require('koa');
const app = new Koa;
-
const response = {
name:'abcdef',
number:9,
MyArray:[1,"a",3,4],
Boolee:true
}
-
app.use(ctx => {
ctx.body = response;
});
app.listen(8080);
-
当我首先启动后端服务器,再使用npm run dev将前端在浏览器上运行起来以后,发现前端控制台报出了这个错误:
Access to XMLHttpRequest at 'http://localhost:8080/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
查阅资料得知这与axios跨域问题有关,但我对此完全没有任何解决思路。
-
我希望问题解决以后,我在网页上运行的前端能够收到来自后端的数据,并顺利对其进行操作产生正确的结果。
请大家帮帮忙吧,谢谢了。

  • 写回答

3条回答 默认 最新

  • Heerey525 前端领域新星创作者 2022-04-27 19:01
    关注
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • Bug 终结者 Java领域优质创作者 2022-04-27 19:48
    关注

    跨域问题的话,1.前端可以使用JsonP解决,2.前端可以使用nginx反向代理解决,3.后端接口加上@CrossOrgin注解即可解决跨域,4.SpingBoot设置配置类进行对外暴露接口来解决

    评论
  • ZionHH 2022-04-27 19:56
    关注

    其实后端已经收到请求了,是因为安全机制在浏览器端被拦截了,前端或者后端都可以处理。
    前端:webpack proxy 代理
    后端:配置响应头response.setHeader("Access-Control-Allow-Origin", "*")

    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 5月5日
  • 已采纳回答 4月27日
  • 创建了问题 4月27日

悬赏问题

  • ¥20 arcgis制做交通拥堵时变图
  • ¥15 AD20 PCB板步线 这个要怎么步啊
  • ¥50 关于《奇迹世界》1.5版本,数据修改
  • ¥15 请问这个问题如何解决(关键词-File)
  • ¥50 visual studio 2022和EasyX图形化界面
  • ¥15 找一下报错原因,纠正一下
  • ¥50 Cox回归模型Nomogram图制作报错
  • ¥20 SQL如何查询多级用户的数据
  • ¥15 给车牌识别代码加一个识别轮廓长宽比的代码
  • ¥30 商品价格预测的transformer模型优化