axios 前端请求接口 跨域问题 Vue实现跨域请求

在前端写接口请求的时候，遇到了跨域的问题。（在一个项目工程中通过接口请求另一个项目工程中的数据）

通过在线api测试 https://getman.cn或者postman接口测试工具，都能正常请求到数据。但是在前端代码里就不行，发现是跨域问题。网上找了半天，发现解决方法其实很简单，参考这篇博客解决：https://blog.youkuaiyun.com/qq_42492055/article/details/82593692

实现跨域请求有两种方式：

1、fetch

（1）在App.vue中使用created方法创建fetch，将域名及方法等创建，如下图

（2）在config配置文件中的index.js中的跨域区域中写入如下代码：

（3）完善信息，将接口相应的需求补充完整

如下图所示，该测试接口有headers和body两个条件

因此，在App.vue中要补充这两个值，如下图

结果如下图所示

综上，fetch方法跨域则完成

2、axios

（1）首先进行安装axios，安装完之后重新启动vue，如下图

（2）其次进行axios的引入，即在main.js中将axios引入，如下图

（3）在App.vue中进行实现（如下图）

 

打印出来的data如下图

 

（4）在main.js中设置axios的token

结果如下图所示

 本人用的是第二种 axios的方法，前三个步骤就可以了，没有按照第四步设置token，接口请求成功了。

总结：

纯前端的跨域问题，可以不用node服务，直接设置一个代理也能解决。（项目为了前后端分离，前端是纯VUE项目，不涉及node服务）

---

程序员朋友们注意啦！

小编的每一篇博客都同步到了腾讯云+社区，可以多一个平台展示自己的博文。如果你也希望同步过去，戳这里https://cloud.tencent.com/developer/support-plan?invite_code=24a4nfrmebi84