专栏首页acoolgiser_zhuanlanaxios 前端请求接口 跨域问题 Vue实现跨域请求

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

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

通过在线api测试 https://getman.cn或者postman接口测试工具,都能正常请求到数据。但是在前端代码里就不行,发现是跨域问题。网上找了半天,发现解决方法其实很简单,参考这篇博客解决:https://blog.csdn.net/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服务)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • beego解决跨域问题:options请求、axios post请求跨域问题

    2020-05-10:上面的配置,在碰到options请求的时候,依然还是会提示跨域问题:

    Happyjava
  • axios请求,跨域问题,设置跨域代理

    生成一个vue项目之后,开始写请求,请求数据,渲染到前端界面,有时候直接请求服务器上的接口,会遇到跨域问题,遇到跨域的时候,需要设置跨域代理~

    王小婷
  • Vue/cli代理axios请求跨域接口

    明知山
  • Vue实现跨域请求

    (1)在App.vue中使用created方法创建fetch,将域名及方法等创建,如下图

    acoolgiser
  • 接收post请求(vue+axios)解决跨域问题(三)

    测试是否成功连接: 打开mysql 运行node服务 npm start 运行vue npm run dev 发现并没有拿到数据...

    RtyXmd
  • vue+axios跨域post请求json格式问题

    前端使用vue+axios开发向后端发起访问,会遇到发送方法为options问题,修改nginx的配置即可解决。

    whileideath
  • JsonP------实现跨域请求

    时间静止不是简史
  • AngularJS实现跨域请求

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    奋飛
  • vue实现跨域请求的设置

    其中 ,将changeOrigin设置为true,就不会存在无法跨域请求的问题了。

    朱季谦

扫码关注云+社区

领取腾讯云代金券