专栏首页acoolgiser_zhuanlanVue实现跨域请求

Vue实现跨域请求

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

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

结果如下图所示

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue实现跨域请求的设置

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

    朱季谦
  • axios 前端请求接口 跨域问题 Vue实现跨域请求

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

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

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

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

    奋飛
  • nanohttpd:实现跨域(CORS)请求

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

    用户1148648
  • 八种方式实现跨域请求

    那么,何为同源呢?只有当协议、端口、域名都相同的页面,则两个页面具有相同的源。只要网站的协议protocol、 主机host、 端口号port 这三个中的任意一...

    奋飛
  • nginx反向代理实现跨域请求

    跨域请求可以通过JSONP实现,缺点是需要修改被请求的服务器端代码进行配合,稍显麻烦 通过在自己服务器上配置nginx的反向代理,可以轻松实现跨域请求 思路 ...

    dys
  • ajax跨域请求

    ajax跨域请求: 服务端 @RequestMapping("/baseList") public void baseList(String siteid, S...

    企鹅号小编
  • Ajax jsonp 跨域请求实例

    跨域请求 JSONP的缺点则是:它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进...

    纯粹是糖

扫码关注云+社区

领取腾讯云代金券