VUE中使用http请求

这篇具有很好参考价值的文章主要介绍了VUE中使用http请求。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

VUE版本

vue http,VUE中使用http请求,Allow-Origin,axios

 文章来源地址https://www.toymoban.com/news/detail-617868.html

1、main.js中添加引用

vue http,VUE中使用http请求,Allow-Origin,axios

import axios from 'axios'
Vue.prototype.$http= axios

 

2、添加proxy跨域访问

vue http,VUE中使用http请求,Allow-Origin,axios 

    proxyTable: {
      // http://localhost:44923/pages/NoteInfo.aspx
      '/pages': {
        target: 'http://localhost:44923',
        ws: true,
        changeOrgin: true,
      }
    },

 

 3、在自己代码逻辑中调用http请求

vue http,VUE中使用http请求,Allow-Origin,axios

 

created()
  {
    var that = this;

    // this.$http.get('http://localhost:44923/pages/NoteInfo.aspx?soft=easyicon')
    this.$http.get('/pages/NoteInfo.aspx', {params:{soft:'easyicon'}})
    .then((response)=>{
      // console.log("log信息");
      // console.log(response);
      
      that.tittle = response.data.tittle;
      that.url = response.data.url;
      that.note = that.base64ToString(response.data.note);
    })
    .catch((response)=>{
        console.log(response);
        this.note = "异常信息";
    })

  },

 

4、异常备注 No 'Access-Control-Allow-Origin' 

vue http,VUE中使用http请求,Allow-Origin,axios通过VUE前端解决方案: 2、添加proxy跨域访问

通过接口后台解决方案:  Response.AddHeader("Access-Control-Allow-Origin", "*");

vue http,VUE中使用http请求,Allow-Origin,axios

 

到了这里,关于VUE中使用http请求的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • No ‘Access-Control-Allow-Origin‘ header is present on the requested resource关于vue跨域问题 重复Access-Control-Allow-Origin

            浏览器为了安全考虑,有一个最基本的安全策略,即同源策略。         同源策略规定:浏览器在解析Ajax请求时,要求浏览器的路径与Ajax的请求的路径必须满足三个要求,即请求的协议、域名、端口号都相同,满足同源策略,可以访问服务器,否则,只要有一个不

    2023年04月17日
    浏览(61)
  • vue3【使用axios并封装axios请求】

    第一步:安装axios 第二步:编写请求文件 新建request.js 简单的axios封装,里面相关提示信息,自己可以引入element-plus去添加

    2024年02月04日
    浏览(62)
  • Vue使用axios发送get请求并携带参数

    其实关于Vue使用axios发送get请求并携带参数,我之前写过一篇,但是昨天又发现了另外一种方式,所以就单独写一篇进行总结。 之前写的那篇使用get请求并携带参数都是使用的字符串拼接的方式 感兴趣可以参考: Vue使用axios进行get请求拼接参数的两种方式 关于如何使用安装

    2023年04月10日
    浏览(58)
  • 再vue项目中使用axios原生发送post请求

    前言:在大多数项目开发中,都是采用前后端分离架构,在此情况下都采用一些成熟的框架,类似于ruoyi,因为成熟所以前端的请求都进行了各种封装,有时想单独发起一个简单的请求,还有点麻烦,因此记录一下。 因为是前后端分离,当前前端使用的端口是81,后端运行的

    2024年02月14日
    浏览(48)
  • Vue 网络处理 - axios 异步请求的使用,请求响应拦截器(最佳实践)

    目录 一、axiox 1.1、axios 简介 1.2、axios 基本使用 1.2.1、下载核心 js 文件. 1.2.2、发送 GET 异步请求 1.2.3、发送 POST 异步请求 1.2.4、发送 GET、POST 请求最佳实践 1.3、请求响应拦截器 1.3.1、拦截器解释 1.3.2、请求拦截器的使用 1.3.3、响应拦截器的使用 1.3.4、拦截器在 Vue 脚手架中的

    2024年02月04日
    浏览(43)
  • No ‘Access-Control-Allow-Origin‘ header is present on the requested resource关于vue跨域问题

            浏览器为了安全考虑,有一个最基本的安全策略,即同源策略。         同源策略规定:浏览器在解析Ajax请求时,要求浏览器的路径与Ajax的请求的路径必须满足三个要求,即请求的协议、域名、端口号都相同,满足同源策略,可以访问服务器,否则,只要有一个不

    2024年02月08日
    浏览(43)
  • Axios基本使用,为学习后续的Vue服务【发送请求+并发请求+前端拦截器】

    目录 1、项目中引入Axios 2、使用Axios发送请求 2.1、例:发送GET请求 2.2、例:发送POST请求 3、axios并发请求 4、拦截器 注:个人学习笔记,因自己学过后端,所以有关后端的代码,我在这里就不展示了~ 不了解后端的宝子,也不会耽误学习,因为公司里会有写好的接口文档,直

    2024年02月02日
    浏览(50)
  • Nginx配置跨域请求Access-Control-Allow-Origin * 详解

    前言 当出现403跨域错误的时候  No \\\'Access-Control-Allow-Origin\\\' header is present on the requested resource ,需要给Nginx服务器配置响应的header参数: 一、 解决方案 只需要在Nginx的配置文件中配置以下参数: 上面配置代码即可解决问题了,不想深入研究的,看到这里就可以啦=-= 二、 解释

    2024年02月22日
    浏览(44)
  • VUE项目使用axios发送post跨域请求,返回数据失败问题

    Access to XMLHttpRequest at \\\'http://xxxx\\\' from origin \\\'http://localhost:8080\\\' has been blocked by CORS policy: Response to preflight request doesn\\\'t pass access control check: No \\\'Access-Control-Allow-Origin\\\' header is present on the requested resource. 第一步 ,在后端接受方,对返回的数据添加 响应头 ,使用下面这句代码: 第二步

    2024年02月11日
    浏览(50)
  • 【Vue框架】Vue2中axios发送请求—安装axios、配置全局域名、传递参数、axios原理之Promise(什么是Promise、使用原因、基本使用、相关API、async与await使用)

    官网: https://www.axios-http.cn/ 1.1.1 安装axios库 安装 axios 通信库: npm install axios -S 1.1.2 在全局中引入axios库 全局在main.js中引入axios: import axios from \\\'axios\\\' 1.1.3 挂在原型对象 Vue.prototype.$axios = axios; 将 axios 挂载到Vue原型对象中,实现数据共享,节约内存空间。 此时在任何页面都可

    2024年02月05日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包