• Vue用axios跨域访问数据


    Vue用axios跨域访问数据
    axios是vue-resource的替代品,vue-resource不再维护。
    安装axios:npm install axios
    使用vue-cli开发时,由于项目本身启动本地服务是需要占用一个端口的,所以会产生跨域的问题。在使用webpack做构建工具的项目中,使用proxyTable代理实现跨域是一种比较方便的选择。
    proxyTable相关配置及使用说明:
    在config/index.js文件中,找到dev对象下proxyTable对象进行跨域设置,配置如下:

    dev: {
        env: require('./dev.env'),
        host: 'localhost',
        port: 8088,
        autoOpenBrowser: true,
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
                '/api': {
            target: 'https://api.douban.com/v2/movie/',//设置你调用的接口域名和端口号 别忘了加http、https
            changeOrigin: true,//是否跨域
                    secure: true, // 允许https请求
            pathRewrite: {
              '^/api': ''//这里理解成用‘/api’代替target里面的地址
            }
          }
        },
    --------------------
    main.js
    /*ajax请求*/
    import axios from 'axios'
    axios.defaults.baseURL = '/api'//https://api.douban.com/v2/movie 改成/api才能用proxyTable跨域
    Vue.prototype.$ajax = axios

    --------------------
    proxyTable配置的意思为:使用字符串"/api"来代替目标接口域名;如果接口地址为"user/getUserInfo",我们可以在所有的接口地址前面加上"/api/"用于设置代理;如:
    'http://localhost:8080/api/user/getUserInfo' ===> 'http://www.abc.com/api/user/getUserInfo'
    如果你不想每次请求地址中都带有"/api/",则可以设置
    pathRewrite: {
    '^/api': '' // 后面可以使重写的新路径,一般不做更改
    }
    表现结果为:
    'http://localhost:8080/api/user/getUserInfo' ===> 'http://www.abc.com/user/getUserInfo'
    另外一种情况是,我们不需要在每个接口地址前添加"/api/",只需要用接口本身的地址,不需要重新路径即可。如果接口为:"/v2/cotton/get_app_list",使用"/v2"做代理;如下:

    dev: {
      proxyTable: {
        '/v2': {
          target: 'http://www.abc.com',  //目标接口域名
          changeOrigin: true,  //是否跨域
          secure: false,  // 允许https请求      
          // 这里去掉了重新设置新路径,因为接口地址本身就是以"/v2/"开头的;
        }
    }
    'http://localhost:8080/v2/cotton/get_app_list' ===> 'http://www.abc.com/v2/cotton/get_app_list'
    // http://localhost:8080/v2表示http://www.abc.com
    默认情况下,不接受运行在 HTTPS 上,且使用了无效证书的后端服务器。如果你想要接受,修改配置如下:
    proxy: {
      "/api": {
        target: "https://www.abc.com",
        secure: false
      }
    }

    ========================

    axios传参

    1:Vue官方推荐组件axios默认就是提交 JSON 字符串,所以我们要以json字符串直接拼接在url后面的形式,直接将json对象传进去就行了
    let postData = {
      companyCode:'zdz',
      userName:'123456789123456789',
      password:'123456'
    }
    axios.get('/api/login/doLogin',{
      params: {
        ...postData,
      }
    })
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });

    这里我们将postData这个json对象传入到post方法中

    2:以key:val的形式传参
    (1).安装qs:npm install qs
    (2).对这个json对象操作
    let postData = qs.stringify({
    companyCode:'zdz',
    userName:'123456789123456789',
    password:'123456'
    })
    (3).再导入
    import qs from 'qs'

  • 相关阅读:
    如何在C#中获得input文本框中的值
    多控件时,自适应布局(dl dd td )
    jquery easyui DataGrid
    报表文本字段钻取使用超链接(URL)的用法 (转)
    rabbitMQ队列使用及常用命令
    java集合操作
    Java集合框架总结(4)——List接口的使用
    Java集合框架总结(3)——TreeSet类的排序问题
    Java HashMap 分析之二:Hash code
    Java HashMap 分析之四:查找和内存使用
  • 原文地址:https://www.cnblogs.com/zdz8207/p/vue-axios-vue-resource.html
Copyright © 2020-2023  润新知