axios FastMock 跨域 代理

发送请求:

  实现:发送请求,获取数据。

  原本想自己写服务,后来无意间找到FastMock这个东东,于是就有了下文。。。

  首先我安装了axios,在fastmock注册好了并创建了一个接口,怎么搞自行百度。

  Q&A:

  Q:怎么请求到?

  A:当然是用axios了。

  代码如下:

<script>
export default {
  name: ‘HelloWorld‘,
  data () {
    return {
     user:‘‘
    }
  },
   mounted () {
    console.log(‘加载...‘)
    this.$axios.post(‘https://www.fastmock.site/mock/e24355f6a27dfe0707757f3ea7e687d4/Ts/login‘
    ).then(function(res){
      console.log(res);
    }).catch(function(res){
      console.log(res);
    });
  }
}
</script>

跨域/代理:

  下面我们进行设置,给axios的baseURL赋值‘/api‘

axios.defaults.baseURL = ‘/api‘

  接下来不管怎么请求,都会有xxxxx/api/xxx

  然后在config=>index.js中找到 proxyTable:{ },添加如下代码:

 proxyTable: {
        ‘/api‘: {
        target: ‘https://www.fastmock.site/mock/e24355f6a27dfe0707757f3ea7e687d4/Ts‘,
        changeOrigin: true,
      }
    },
  •   开头的 ’/api‘ 表示当地址请求地址中存在/api/xxxx这种请求格式时将/api之前的内容换成target的值,那么还记得刚刚设置的 axios.defaults.baseURL = ‘/api‘ 吗?是不是妙哉~
  •   target:你的api地址。
  •   changeOrigin:是否可跨域。

  接下来请求直接写成 /login就行了

//使用代理地址,由于main.js中baseURL为/api,所以所有请求都会走代理地址,只要写请求方法就行
this.$axios
.post(‘/login‘,{‘username‘:‘admin‘,‘password‘:‘123456‘})
.then(response=> {console.log(response)} )
.catch(error=>console.log(error))

  到这请求就完成了,附上fastmock的接口(fastmock文档中的)

{
  "code": "0000",
  "data": {
    "verifySuccess": function({_req, Mock}) {
      return _req.body;
    },
    "userInfo": function({_req, Mock}) {
      let body = _req.body;
      if (body.username === ‘admin‘ && body.password === ‘123456‘) {
        return Mock.mock({
          username: "admin",
          email: "@email",
          address: "@address"
        });
      } else {
        return null;
      }
    },
  },
  "desc": "成功"
}

PS:不得不吐槽下,准备好复制进来的文本和图片加载不出来,就一直转转转转转转转转<云计算中>~~~~~~~ @[email protected]

原文地址:https://www.cnblogs.com/zousc/p/12074382.html

时间: 2024-10-28 19:20:57

axios FastMock 跨域 代理的相关文章

axios,vue-echarts, async, vue 图表数据处理; axios 跨域代理; 异步同步请求接口;生命周期函数

1.vue-echarts 安装和组件引用 插件官网 https://github.com/ecomfe/vue-echarts 安装 npm install eacharts vue-echarts 页面引入 import ECharts from 'vue-echarts' import ECharts from 'vue-echarts' import 'echarts/lib/chart/line' // 折线图 import "echarts/lib/component/title&q

在vue中使用axios实现跨域请求并且设置返回的数据的格式是json格式,不是jsonp格式

在vue中使用axios实现跨域请求 需求分析:在项目中需要抓取qq音乐的歌曲列表的数据,由于要请求数据的地址url=https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg.从qq音乐的官网上可以看到该请求的请求头中的referer中的域名是y.qq.com(发送请求页面的域名),而host的域名是c.y.qq.com(被请求页面的域名),由于两者不一样,所以不能通过前端直接发送请求给qq服务器去拿数据.这时候需要服务器做一个代理

React里配置接口跨域代理【亲测完美实现~】

这种问题当然离不了官网妈妈的支持:传送门 官网给了三种解决方案.前两种我就不赘述了(主要是因为我没用) 而官网的第三种推荐的方式: 1.安装依赖: $ npm install http-proxy-middleware --save $ # or $ yarn add http-proxy-middleware 2.在“src”文件夹下新建“setupProxy.js”文件.并做官网推荐的配置- 理论上,在正确的路径下新建setupProxy.js完毕,你只需要把下边这段官网的代码抄过来就可以了

nodejs之mock与跨域代理的三两事

emmm...好久没写博客了,都忘了该怎么开始. 那就先说下mockjs.因为一些原因,导致后台接口没有数据,那么我们就开始自己造数据,使用的是比较流行mockjs,根据文档就能简单的配置,然后开始愉快的玩耍了.(真香) 然后某天后台出数据了,又因为某些问题(跨域),导致我又没法愉快的玩耍,嗯,就是这样的,才有了今天这篇博客(口水话). 使用的是nodejs做跨域代理,非常简单,先贴代码: 1 var express = require('express'); 2 var router = ex

vue-cli配置跨域代理

现在使用vue大多使用了前后端分离模式,因此游览器经常显示跨域失败的信息,现在跨域的方式很多种,主要分两大类,ajax跨域,dom跨域,具体的方法就不例举啦. vue-cli作为一个强大的脚手架,内置了一个简单的配置型跨域方式 找到目录下的config文件下,index.js中dev配置对象中的proxyTable属性,这里是一个对象 下面对这个对象属性进行解析: proxyTable: { '/api':{ //这里的key就是axios的baseURL target: 'http://127

axios处理跨域问题

首先npm安装好axios,其次在main.js中引入: import axios from 'axios' Vue.prototype.$axios = axios //把axios挂载到vue的原型中,在vue中每个组件都可以使用axios发送请求Vue.prototype.HOME = '/api' //重要在于这里,Vue.prototype.HOME = '/api'是一个定值,默认指向localhost,所有修改指向路径为'/api',配置文件index.js定义的可跨域路径 第二步

vue-cli3 axios解决跨域问题

这种错误就是跨域问题: 我百度了各种方法,最终下面这种方法解决了,直接上代码:  解决: 如果没安装axios: npm install axios -save //安装axios main.js //引入axios import axios from 'axios' Vue.prototype.axios=axios axios.defaults.baseURL = '/api' 我用的是vue-cli3开发的项目,没有vue.config.js目录,这个是我新建的 vue.config.js

webpack自带的跨域代理配置

问题:开发过程中难免有跨域的问题. 解决:webpack代理的配置 const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const webpack = require('webpack'); module.exports = { entry:

记录:使用springboot的cors和vue的axios进行跨域

一.编写一个配置类,并且注册CorsFilter: 注意允许跨域的域名不要写错 @Configuration public class ZysuyuanCorsConfiguration { @Bean public CorsFilter corsFilter() { // 初始化cors配置对象 CorsConfiguration corsConfiguration = new CorsConfiguration(); // 允许跨域的域名,如果要携带cookie,不能写*,*代表所有域名都可