zoukankan      html  css  js  c++  java
  • Vue-创建axios实例并实现跨域请求(前端请求api环境搭建)

    Vue-创建axios实例并实现跨域请求

    .env配置文件

    VUE_APP_BASE_API=/server
    

    request.js

    import axios from 'axios'
    const test = axios.create({
      baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
      timeout: 50000, // request timeout
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      withCredentials: true
    })
    
    export default test
    

    创建api请求接口

    import request from './request.js'
    
    /**
     * 查询所有用户信息
     */
    export function list () {
      return request({
        url: '/all/users',
        method: 'get'
      })
    }
    

    配置vue.config.js代理请求

    module.exports = {
      devServer: {
        port: 8000, // 改端口号
        open: true,
        proxy: {
          // 以server开头的请求才会使用到该代理,即http://localhost:8000/server/query/users.
          '/server': {
            target: 'http://localhost:8081/', // 服务器地址
            changeOrigin: true, // 开启跨域
            pathRewrite: {
               // 当请求以/server开头时,将其置为空 则请求最终为http://localhost:8081/query/users
              '/server': '' 
            }
          }
        }
      }
    }
    

    创建User.vue组件实现具体访问

    <template>
        ……
    </template>
    <script>
    import * as UserApi from '../api/user.js''
    export default {
      name: 'User',
      data () {
        return {
          ...
        }
      },
      mounted: function () {
        this.loadUser()
      },
      methods: {
        loadUser () {
          UserApi.list().then(res => {
            console.log(res.data)
          })
        }
    }
    </script>
    
    <style scoped>
    ……
    </style>
    
    

    前端访问地址为:http://localhost:8000/server/query/users

    会被代理解析为:http://localhost:8081/query/users 访问到服务器端获取数据

    可以在控制台查看获取到的数据

  • 相关阅读:
    用mysql++读写二进制
    mysql++的release版本当机的问题
    mongo的安装
    什么是新装用电和增加用电
    填写用电报装申请表
    湖南省居民生活阶梯电价政策问答
    什么是阶梯电价
    用case when 动态给sql 添加 查询条件
    js 原型 继承
    可编辑的表格
  • 原文地址:https://www.cnblogs.com/code-duck/p/13414099.html
Copyright © 2011-2022 走看看