在vue项目中使用axios访问不了koa搭建的服务器的接口

Question

**

小白诚心求教 在vue项目中使用axios访问不了koa搭建的服务器的接口

**
1. 我后台使用koa2这个框架写的接口.设置是这样的,使用postman访问毫无问题.我本地服务器

2. 然后启动我用vue搭建的博客项目,采用最基本的使用axios的写法,来请求接口数据,代码如下图:

3. 界面显示如下图:

另外我发现这个请求似乎根本没有发起,谷歌浏览器里面的network显示状态时200,但是请求体是空的,后台接口取不到请求体的数据.

我是刚开始使用,实在不知道究竟是什么原因了,求大神指点迷津.

Answer 1

看右侧控制台的输出，跨域问题。
编辑
你这个请求触发了预检请求，但是服务器端没有设置预检请求的响应首部，造成浏览器拦截了。
解决方法：

1. 对 options 请求设置CORS响应首部；
2. 对所有类型请求设置CORS响应首部，可以借助 koa-cors 中间件

取决于你项目中接口的使用范围。

Answer 2

我已经解决了,我通过在服务器端引入 const cors = require("koa-cors") 这个中间件,然后 app.use("cors") 这样的设置解决了这个问题.
参考的博客: http://blog.csdn.net/ziwoods/...

这篇博客介绍了node,express,koa 这三种情况下解决跨域的方法,希望可以帮助到有需要的人.