2021搭建企业级后台（Vue + TS + Element Plus ）～ 6.配置路由及封装请求

最新推荐文章于 2024-05-15 23:28:55 发布

后海 0_o

最新推荐文章于 2024-05-15 23:28:55 发布

阅读量197

点赞数

分类专栏：工程化文章标签：前端

本文链接：https://blog.csdn.net/weixin_45137565/article/details/119778597

版权

工程化专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了在Vue项目中，由于后台数据接口未启用CORS，导致跨域问题的解决方法。通过在vue.config.js文件中配置devServer的proxy属性，将/boss和/front接口转发到对应的服务器地址，并启用changeOrigin以修改请求头。同时，文章还展示了如何安装axios并封装请求模块，以及在组件中进行测试调用。

摘要由CSDN通过智能技术生成

后台提供的数据接口

这两个接口都没有使用 CORS 跨域请求，所以需要在客户端配置服务端代理处理跨域服务。

可参考 Vue 官方文档

添加代理跨域：

在 vue.config.js 文件中插入：

  // 配置代理跨域
  devServer: {
    proxy: {
      '/boss': {
        target: 'http://eduboss.lagou.com', // 所有 /boss 的请求头都会被被转发到 target 这个目标地址
        changeOrigin: true // 把请求头中的 host 配置为 target
      },
      '/front': {
        target: 'http://edufront.lagou.com',
        changeOrigin: true
      }
    }
  }

修改配置后重启项目…

测试：

在网址 http://localhost:8080 中后插入 /boss 或 /front：
在这里插入图片描述

封装请求模块

安装 axios

npm i axios

创建 src/utils/request.ts 请求模块：

import axios from 'axios'

const request = axios.create({
  // 配置选项
  // baseURL
  // timeout
})

// 请求拦截器

// 响应拦截器

export default request

测试

在 App.vue 中：

<template>
  <div id="app">
    <h1>Hello World</h1>

    <!-- 根路由出口 -->
    <router-view/>

    <p class="text">红色的文字</p>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import request from '@/utils/request'

request({
  methods: 'GET',
  url: '/boss'
}).then(res => {
  console.log(res)
})

export default Vue.extend({
  name: 'App'
})
</script>

<style lang="scss" scoped>
.text {
  color: $danger-color;
}
</style>