精华内容
下载资源
问答
  • vue请求接口封装

    2021-01-25 17:00:57
    最近做的electron-vue的一个项目和vue请求一样,封装了下请求接口函数。项目中使用到了element-ui 接口方法使用到了axios和qs(electron-vue中自带了axios和qs,qs解决后台接收不到参数的问题)。 在utils文件夹下...

    最近做的electron-vue的一个项目和vue请求一样,封装了下请求接口函数。项目中使用到了element-ui

    接口方法使用到了axios和qs(electron-vue中自带了axios和qs,qs解决后台接收不到参数的问题)。

    在utils文件夹下新建request.js,代码如下:

    import axios from 'axios';
    import { Message, Loading } from 'element-ui'
    import qs from 'qs'; //参数序列化,把数据格式转为 x-www-form-urlencoded
    import store from '../store' //token 放在了vuex store存储中
    
    let BASE_URL = '', loadingInstance;
    let HOST = process.env.NODE_ENV; //可自定义写死
    switch (HOST) {
        case 'development':
            BASE_URL = 'http://xx.xx.xxx.xx:8080/api';
            break;
        case 'test':
            BASE_URL = 'http://xx.xx.xxx.xx:8080/api';
            break;
        default:
            BASE_URL = 'http://xx.xx.xxx.xx:8080/api';
    }
    axios.create({
        crossDomain: true,//设置cross跨域
        withCredentials: false,  //跨域请求是否允许携带cookie资源凭证
        baseurl: BASE_U
    展开全文
  • title: vue请求接口获取数据及跨域问题 date: 2018-11-28 16:44:08 文章目录0. 前言1. 通过api接口获取数据1.1. vue-source1.1.1. 安装1.1.2 使用1.2. axios1.2.1. 安装1.2.2. 使用1.2.3. 补充2. 跨域问题2.1. 问题...

    title: vue请求接口获取数据及跨域问题
    date: 2018-11-28 16:44:08


    0. 前言

    本文基于vue-cli3

    1. 通过api接口获取数据

    vuejs中请求接口,大体分为两种方式:vue-sourceaxios。它们都是经过良好封装的http请求插件。

    下文将简单介绍一下使用方法。

    1.1. vue-source

    略讲,详情见这篇博客

    1.1.1. 安装

    首先,安装该插件:

    npm install vue-source --save
    

    然后,在项目src/main.js中,通过全局方法Vue.use()使用该插件:

    import VueSource from 'vue-source'
    
    Vue.use(VueSource)
    

    1.1.2 使用

    在data中定义好接口和接收的数据类型,然后,调用this.$http.get()函数进行get请求即可,代码如下:

    data () {
      return {
        apiUrl: 'https://xxxxx',
        users: []
      }
    },
    methods: {
    },
    created () {
      this.$http.get(this.apiUrl).then((response) => {
        console.log(response)
      }, (error) => {
        console.log('error:', error)
      })
    }
    

    代码解释:$http.get().then()是get函数请求返回后才调用的函数。then()函数的中两个参数是匿名函数。上述代码使用了ES6新增了箭头函数(即参数指向函数),也可以写成以下形式:

    this.$http.get(this.apiUrl).then(function (response) {
      console.log(response)
    }, function (error) {
      console.log('error:', error)
    })
    

    1.2. axios

    1.2.1. 安装

    npm install axios
    

    1.2.2. 使用

    axios库的主要请求函数有:

    axios.request(config)
    axios.get(url[, config])  // 表示 axios.get(url, config) 和 axios.get(url) 都被允许
    axios.delete(url[, config])
    axios.head(url[, config])
    axios.post(url[, data[, config]])
    axios.put(url[, data[, config]])
    axios.patch(url[, data[, config]])
    

    config对象的详细属性、请求的后续then()/catch()操作、配置的默认值/defaults等等,见 Axios 中文说明

    (以下纯属个人观点

    为了更好地进行模块间的解耦,在vue-cli3构建的项目的src\目录下,创建api\目录,将项目所有需要进行的请求的配置封装到该目录下。

    此处示例只封装到一个api.js文件,如下:

    // src/api/api.js
    import axios from 'axios'
    
    // 允许跨域携带cookie
    // axios.defaults.withCredentials = true;
    
    export const uploadelf = () => {
        return axios.request({
            method: 'post',
            url: 'http://xxxxx.xxx/api/uploadelf'
        })
    }
    
    export const start = () => {
        return axios.request({
            method: 'get',
            url: 'http://xxxxx.xxx/api/start'
        })
    }
    
    export const getDisassemble = (funName = 'main') => {
        return axios.request({
            method: 'post',
            url: 'http://xxxxx.xxx/api/disassemble',
            data: {
                funName
            }
        })
    }
    

    其中,每个函数返回一个调用请求后的对象,相当于设计模式中的工厂方法

    如此封装的好处是,用户使用时,并不需要知道某个请求的请求url和请求方式

    当你需要在其它模块中进行相应的请求时,只需要import导入api.js中相应的函数变量并调用即可,如:

    // src/view/main.vue
    
    ...
    
    <script>
    // 导入相应的请求函数
    import {uploadelf, start, getDisassemble} from '../api/api'
    
    export default {
      data() {
        return {
          assemb: []
        }
      },
      methods: {
        click_uploadelf() {
          // 调用该工厂方法进行请求返回一个对象,再通过对象的then(), catch()方法进行后续操作
          uploadelf().then(resp => {
            console.log('uploadelf --->', resp.data);
          }).catch(error => {
            console.log(error);
          });
        },
        click_start() {
          start().then(resp => {
            console.log('start --->', resp.data);
          }).catch(error => {
            console.log(error);
          });
        },
        click_getDisassemble() {
          getDisassemble('main').then(resp => {
            console.log('getDisassemble --->', resp.data);
            this.assemb = resp.data.message;
          }).catch(error => {
            console.log(error);
          });
        }
      }
    }
    </script>
    

    1.2.3. 补充

    js的请求属于异步操作(不需要等请求完成,函数直接执行结束)。所以,需要通过回调函数来实现请求完成的后续操作。

    axios主要利用ES6 Promise来实现异步请求的后续操作。

    同时,异步请求会导致请求并行的情况。多个请求之前不能太接近。

    2. 跨域问题

    2.1. 问题

    如果是本机localhost:8000测试,可能会出现跨域问题,打开浏览器会看到如下报错:
    1

    2.2. 补充

    • 当两个域具有相同的协议(如http), 相同的端口(如80),相同的域名如www.baidu.com,那么我们就可以认为它们是在相同的域中(协议,域名,端口都必须相同)。

    • 跨域,就是指协议、域名、端口其中一个或多个不一致的情况下,从当前域去访问另一个域。

    • 出于安全考虑(防止跨域攻击 XSS、CSRF),浏览器会禁止跨域的请求访问。其实,同源策略是一种约定,它也是浏览器最核心也最基本的安全功能。

    2.3. 解决

    跨域问题解决有很多方式,主要讲以下三种。

    2.3.1. CROS(跨域资源共享)

    前端Vue,设置axios允许跨域带cookie(默认不带cookie),如下:

    // axios全局配置,允许跨域带cookie
    axios.defaults.withCredentials = true;
    

    后端:

    跨域请求后的响应头中需要设置:

    • Access-Control-Allow-Origin为发起请求的主机地址。

    • Access-Control-Allow-Credentials,当它被设置为true时,允许跨域带cookie,但此时Access-Control-Allow-Origin不能为通配符*

    • Access-Control-Allow-Headers,设置跨域请求允许的请求头。

    • Access-Control-Allow-Methods,设置跨域请求允许的请求方式。

    2.3.2. Vue代理

    vue-cli自带代理功能,由node服务器实现。

    在项目根目录下新增vue.config.js项目配置文件,然后配置代理:

    // 修改配置后一定要 重新npm run serve !!!
    module.exports = {
        devServer: {
            // vue项目启动时的ip地址和端口
            host: 'localhost',
            port: 8000,
            proxy: {
                // 匹配所有以 /api 开头的url
                '/api': {
                    // 请求的目标主机
                    target: 'http://xxx.xxx:8080',
                    changeOrigin: true,
                    ws: true
                    // 匹配路径中的 `/api` 替换成 `/` 
                    // pathRewrite: {
                    //   '^/api': '/'
                    // }
                }
            }
        }
    }
    

    同时需要将请求URL改成以/api开头,如下:

    axios.request({
        method: 'post',
        url: '/api/uploadelf'
    })
    

    设置代理后,本地nodejs服务器会将目标主机的url代理到vue项目的url

    如:

    访问http://dev3.airdb.io:8080,会转变成访问http://localhost:8080,再由http://localhost:8080转发请求到http://dev3.airdb.io:8080

    这样,就成了同域请求,浏览器不会进行限制。但实际上,还是请求了目标主机,只是欺骗了浏览器。

    由于Vue代理需要利用node服务器,所以只适用于本地npm run serve调试时。

    当项目部署到服务器时,可以使用CROS方式、nginx反向代理等方式。

    2.3.3. nginx反向代理

    只需要在nginx.conf配置文件的vue项目对应的server中,添加:

    # 匹配vue项目中所有以/api开头的请求url
    location /api {
        include  uwsgi_params;
        proxy_pass   http://0.0.0.0:8081; # 要代理访问的后端url
    }
    

    完整示例如下:

    server {
        listen       8000;
        listen       80;
        server_name  _;
        root         /pathto/vue_project/;
    
        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;
    
        location / {
            index index.html;
        }
    
        error_page 404 /404.html;
            location = /40x.html {
        }
    
        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    
        location /api {
            include  uwsgi_params;
            proxy_pass   http://0.0.0.0:8081;
        }
    }
    
    展开全文
  • vue解决浏览器请求携带参数问题

    万次阅读 2018-11-26 18:58:55
    需求:当需要多传一个参数时,改接口非常麻烦,所以解决方案是把需要的信息放到请求头上传到后台 // //设置axios发送请求时的添加请求头 // axios.defaults.baseURL = "http://localhost:9091/v1" // //...

    需求:当需要多传一个参数时,改接口非常麻烦,所以解决方案是把需要的信息放到请求头上传到后台

    // //设置axios发送请求时的添加请求头
    // axios.defaults.baseURL = "http://localhost:9091/v1"
    // //设置axios请求的超时时间
    // axios.defaults.timeout = 3000
    // //设置提交数据是的格式
    // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
    
    // axios.interceptors.request.use(function (config) {
    //     //判断如果登录了就把token配置到axios的协议中
    //     let token = localStorage.getItem("token")
    //     if (token) {
    //         config.headers['Authorization'] = token
    //     }
    //     //处理请求前代码
    //     return config;
    // }, function (error) {
    //     //一些事情伴随着错误
    //     return Promise.reject(error)
    // })
    
    

     

    展开全文
  • isToken) { config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改 } // get请求映射params参数 if (config.method === 'get' && config.params) { let ...
    request代码========================
    
    import axios from 'axios'
    import { Notification, MessageBox, Message } from 'element-ui'
    import store from '@/store'
    import { getToken } from '@/utils/auth'
    import errorCode from '@/utils/errorCode'
    import securityCode from './securityCode'
    
    
    axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
    
    
    
    /**
     * 默认通用响应
     **/
    function axiosDefaultResponse(res, errorMsg) {
        const { code, msg, data } = res;
        if (code === 12580) { // 登录失效返回码
            // Notification({
            //   type: 'warning',
            //   title: '提示',
            //   message: msg || '登录失效',
            //   duration: 2000,
            //   onClose: () => {
            //     // 跳转登录页
            //     router.push({
            //       path: '/login'
            //       //query:{redirect:location.hostname}
            //     })
            //   }
            // })
        } else if (code === 200 || !errorMsg) { // 接口返回码为200或者不弹提示框返回数据
            if (securityCode.isSeCode()) {
                securityCode.security(res.data)
            }
            return res
        } else { // 弹出系统提示
            Notification({
                type: 'error',
                title: '错误',
                message: msg || errorMsg,
                duration: 2000
            });
            return res
        }
    }
    
    //    自定义请求
    // 创建axios实例
    const service = axios.create({
        // axios中请求配置有baseURL选项,表示请求URL公共部分
        baseURL: process.env.VUE_APP_BASE_API,
        // 超时
        timeout: 10000
    })
    
    // request拦截器
    service.interceptors.request.use(config => {
    
    
            // 存入本地 
        if (config.method == "post") {
    
            securityCode.interceptData(config.data)
                // securityCode
        }
    
    
    
        // 是否需要设置 token
        const isToken = (config.headers || {}).isToken === false
        if (getToken() && !isToken) {
            config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
        }
        // get请求映射params参数
        if (config.method === 'get' && config.params) {
            let url = config.url + '?';
            for (const propName of Object.keys(config.params)) {
                const value = config.params[propName];
                var part = encodeURIComponent(propName) + "=";
                if (value !== null && typeof(value) !== "undefined") {
                    if (typeof value === 'object') {
                        for (const key of Object.keys(value)) {
                            let params = propName + '[' + key + ']';
                            var subPart = encodeURIComponent(params) + "=";
                            url += subPart + encodeURIComponent(value[key]) + "&";
                        }
                    } else {
                        url += part + encodeURIComponent(value) + "&";
                    }
                }
            }
            url = url.slice(0, -1);
            config.params = {};
            config.url = url;
        }
        return config
    }, error => {
        console.log(error)
        Promise.reject(error)
    })
    
    // 响应拦截器
    service.interceptors.response.use(res => {
    
            securityCode.security(res.data.data)
    
            // 未设置状态码则默认成功状态
            const code = res.data.code || 200;
            // 获取错误信息
            const msg = errorCode[code] || res.data.msg || errorCode['default']
            if (code === 401) {
                MessageBox.confirm('登录状态已过期,您可以继续留在该页面,或者重新登录', '系统提示', {
                    confirmButtonText: '重新登录',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    store.dispatch('LogOut').then(() => {
                        location.href = '/ctsc';
                    })
                })
                store.dispatch('LogOut').then(() => {
                    location.href = '/ctsc';
                })
            } else if (code === 500) {
                Message({
                    message: msg,
                    type: 'error'
                })
                return Promise.reject(new Error(msg))
            } else if (code !== 200) {
                Notification.error({
                    title: msg
                })
                return Promise.reject('error')
            } else {
                return res.data
            }
        },
        error => {
            console.log('err' + error)
            let { message } = error;
            if (message == "Network Error") {
                message = "后端接口连接异常";
            } else if (message.includes("timeout")) {
                message = "系统接口请求超时";
            } else if (message.includes("Request failed with status code")) {
                message = "系统接口" + message.substr(message.length - 3) + "异常";
            }
            Message({
                message: message,
                type: 'error',
                duration: 5 * 1000
            })
            return Promise.reject(error)
        }
    )
    
    export default service
    
    
    函数代码 自动获取code==================================
    
    const S_CODE = 'securityCode'; //安全码参数key
    const securityCodeOpen = true; //安全码开关
    export default {
        /**
         * 安全拦截验证
         *
         * @param data 返回的数据
         * @param url  请求的url
         */
    
        isSeCode() {
            return securityCodeOpen;
        },
        security(data) {
            if (data) {
                if (data instanceof Array) {
                    for (let i = 0; i < data.length; i++) {
                        const item = data[i]
                        if (item['id'] && item[S_CODE]) {
                            this.storeSecurity(item['id'], item[S_CODE])
                        } else {
                            break;
                        }
                    }
                } else if (data instanceof Object) {
                    if (data['id'] && data[S_CODE]) {
                        this.storeSecurity(data['id'], data[S_CODE])
                    }
                    for (const key in data) {
                        if (data[key] instanceof Object) {
                            this.security(data[key])
                        }
                    }
                }
            }
        },
        /**
         * 存储安全认证信息
         */
        storeSecurity(id, scode) {
            if (id && scode) {
                let sidMap = localStorage.getItem("sidMap")
                if (!sidMap) {
                    sidMap = {}
                } else {
                    sidMap = JSON.parse(sidMap)
                }
                sidMap[id] = scode
                localStorage.setItem("sidMap", JSON.stringify(sidMap))
                return true
            } else {
                return false
            }
        },
        /**
         * 获取id安全认证信息
         */
        getSecurity(id) {
            const sidStr = localStorage.getItem("sidMap")
            if (sidStr) {
    
                const sidMap = JSON.parse(sidStr)
    
                if (sidMap) {
                    if ((id + "").indexOf(",") > 0) {
                        const idArray = id.split(",")
                        const sArray = []
                        for (let i = 0; i < idArray.length; i++) {
                            sArray.push(sidMap[idArray[i]])
                        }
                        return sArray.join(",")
                    } else {
                        return sidMap[id]
                    }
                }
            }
            return ''
        },
        interceptData(data) {
            if (data) {
                const form = data;
                //参数中存在id,附加安全码
    
                if ((form["id"] || form["ids"]) && this.isSeCode()) {
    
                    data[S_CODE] = this.getSecurity(form.id || form.ids)
                        /*if (!data.params) {
                            data.params = {};
                        }
                        data.params[S_CODE] = this.getSecurity(form.id||form.ids)
                        if(!data.params[S_CODE]&&form.securityCode){
                            data.params[S_CODE] = form.securityCode;
                            this.storeSecurity(form.id||form.ids,form.securityCode);
                        }*/
                }
            }
            return data;
        },
    }
    
    
    
    展开全文
  • 我就废话不多说了,大家还是直接看代码吧~ // An highlighted block ...axios.interceptors.request.use( config =>{ const token = window.sessionStorage.getItem('Tk_token') const user_id=window....
  • Vue调用接口请求头增加参数

    千次阅读 2020-10-11 16:22:46
    { //请求头这里加参数这里加参数这里加参数这里加参数这里加参数 let setSecret = getSecret() config.headers['nonce'] = setSecret.nonce config.headers['timestamp'] = setSecret.timestamp config.headers['...
  • 在vuejs中请求接口,大体分为两种方式:vue-source和axios。它们都是经过良好封装的http请求插件。 下文将简单介绍一下使用方法。 1. vue-source 略讲,详情见这篇博客。 安装 首先,安装该插件: npm ...
  • 简单的上传文件,先把文件上传到input框只展示文件名,不走接口,之后点击确定上传按钮统一上传 <template> <div> <Col> <FormItem label="上传文件:" prop="plugin_name"> <...
  • Vue请求传递参数

    2021-03-03 21:45:53
    一、get请求 get请求没有请求体,传递的参数是添加到url字符串的后面:url?name=value&name1=value1。 1、直接拼接 axios({ method: "get", ...pwd=123", //参数拼接在url后面 ...携带参数 2、params属性
  • 在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下: 1.第一次登录的时候,前端调后端的登录接口,发送用户名和密码 2.后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token 3.前端拿到...
  • Electron-vue请求携带cookie跨域问题

    千次阅读 2020-07-10 12:08:22
    Electron-vue请求携带cookie跨域问题 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 问题说明 在请求携带cookie的时候,跨域的问题又...
  • vue.js项目里我想用一个js文件存放接口的公共部分和加解密的方法,然后我第一次用vue+webpack不太会用,所以请问一下该怎么写
  • 1.使用axios的方式携带请求头token2.设置响应的数据类型 responseType: "blob" 1 3.请求成功,返回二进制文件的数据回来4.请求失败,返回json5.示例代码 <template> <div> <el-button type=...
  • vue中使用axios,post请求时后端返回给我“缺少参数”,查看调试工具里的网络发现也携带了数据过去。 然后换成ajax时却请求成功。这是为啥,应该怎么解决呢。 还有就是axios,为啥还要添加token请求头。
  • vue 中使用axios 发送post 请求需要使用 qs 模块 将参数 转序列化 发送给 后端 否则接口会出现收不到参数的情况 import qs from "qs" 记得安装下哦 npm i qs -S 第一种 var url = "换成你的地址"; var data = {} ...
  • Vue在发起跨域请求时,后端已经开启CORS,前端需要也携带cookie,此时需要在前端请求头加上withCredentials: true,表示请求可以携带cookie,例如以下为用户注册部分代码。 axios.post(this.host + '/users/', { ...
  • vue使用ueditor请求携带token

    千次阅读 2020-02-26 23:15:32
    ueditor的init请求请求config)以及simpleupload,图片上传请求携带token解决方法: 首先使用npm i vue-ueditor-wrap -S, 在引用页面直接 import VueUeditorWrap from 'vue-ueditor-wrap’即可。 然后将ueditor...
  • 今天小编就为大家分享一篇vue项目使用axios发送请求让ajax请求头部携带cookie的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue携带token请求头访问后端接口总是报null1. 问题描述2. 问题原因3. 问题解决 1. 问题描述 在拦截器中加入以下代码,目的为获取前端请求头里面的token字符串。但是第一次访问一直都获取不到,奇怪的是,第二次访问...
  • 主要介绍了vue+axios全局添加请求头和参数操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue 请求头中headers加参数

    千次阅读 2021-02-22 15:25:56
    一加在请求中如: //自定义的前缀和router请求 import settings from '@/settings' import request from '@/utils/commissioner_request' export function queryConfigValue(userCode, comId) { return request({...
  • vue封装axios接口请求

    2020-05-19 21:23:21
    Home.vue <template> <div class="home"> <button @click="getVeryTakeInformation">get非携参请求数据</button> <button @click="getTakeInformation">get携参请求数据</...
  • vue resource 携带cookie请求 vue cookie 跨域 1、依赖VueResource 确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm install vue-resource --save 在主方法添加 过滤 Vue.http.interceptors.push...
  • vue项目使用axios发送请求让ajax请求头部携带cookie的方法最近做vue项目时遇到登录权限问题,登录以后再发送的请求头部并没有携带登录后设置的cookie,导致后台无法校验其是否登录。检查发现是vue项目中使用axios...
  • Electron-vue在发送请求携带cookie

    千次阅读 2020-07-10 11:58:50
    Electron-vue在发送请求携带cookie 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 解决 axios一般呢我们会遇到在vue项目使用它来...
  • 1. vue跳转 this.$router.push({ path: '/user/userDetils', query: { id: JSON.stringify(val.id), name: JSON.stringify(this.searchData.name), status: val.status } }); 2. 配置路由 var subRouter...
  • 点击任务名称,获得这一行的数据,在页面跳转时,携带这一行的数据对象。在B页面接收,然后展示出来。 实现: 仅展示部分代码 完整页面不便展示 A页面 // A页面 任务名称列,给任务名称加点击事件 <el-table-...
  • vue中配置请求参数FormData格式

    千次阅读 2020-12-06 23:11:17
    有时候需要给后端传递的参数是FormData(表单)格式(默认是json格式) // 在main.js中配置如下代码 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded' axios.defaults....
  • vue循环请求一个接口

    千次阅读 2020-09-01 21:49:19
    最近在做一个项目时需要批量生成某些数据,这里就用到了循环请求一个接口,也是第一次使用这种方式。可以利用 forEach 循环进行请求一个接口。 是根据时间段去批量生成的。 packageSubmit(){ const than=this ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,593
精华内容 1,837
关键字:

vue请求接口携带参数

vue 订阅