vue项目怎么让一部分接口走本地的mock出来的接口,一部分配合后端swagger测试(需要配置跨域)

Neoo1984
  • 53

后台模板,用的是大佬的模板https://github.com/PanJiaChen...
模板中的数据都是mock出来的,现在一部分接口替换掉成后端的接口,同时这些接口没在后端配置跨域,需要前端配置。该如何配置

image.pngimage.png
配置了proxy之后,想让/api/factory走proxy的域名,但还是走了mock的

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

我现在用的这套模板,它是走的mock的接口,比如登录,现在我需要保留比如登录,再之后某个页面用自己的接口。这是他的request.js

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})
.env.develpment:
# base api
VUE_APP_BASE_API = '/dev-api'
//我现在想新建一个比如
VUE_APP_BASE_API_WEB = '/api'

然后在request.js中,如何切换不同的baseurl,百度到一个写法但是似乎不起作用:

service.interceptors.request.use(
  config => {
    // do something before request is sent
    if(config.requestBase==='VUE_APP_BASE_API') {

      if (store.getters.token) {
        // let each request carry token
        // ['X-Token'] is a custom headers key
        // please modify it according to the actual situation
        config.headers['X-Token'] = getToken()
      }
    }else if (config.requestBase==='VUE_APP_BASE_API_WEB'){
      config.baseUrl = process.env.VUE_APP_BASE_API_WEB
      if (store.getters.token) {
        // let each request carry token
        // ['X-Token'] is a custom headers key
        // please modify it according to the actual situation
        config.headers['X-Token'] = getToken()
      }
    }
      return config

  },

这里的config.requestBase 似乎没这个参数?
这是接口的部分:


export function getFactoryList(params) {
  return request({
    url: '/api/factory/page',
    method: 'post',
    requestBase:'VUE_APP_BASE_API_WEB',
    params
  })
}

这是proxy

  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy:{
      "/api":{
        target:"http://10.10.98.208:7018",
        changeOrigin:true,
        logLevel: 'debug'
      },
    },
    before: require('./mock/mock-server.js')
  },
回复
阅读 1.1k
2 个回答

更新图片:

image.png


原答案:

  1. 把不需要mock的,从mock配置中删除即可,改成走自己的接口配置。
  2. 关于跨域,本地开发环境的话,前端在开发环境可以通过配置vue.config.js配置跨域解决。非本地开发环境的话,尽量与后端同学沟通一下,处理一下core解决跨域问题。附上vue.config.js
    image.png
已参与了 SegmentFault 思否「问答」打卡,欢迎正在阅读的你也加入。

mock匹配到相应的url会使用mock数据,只要你使用的后端的url跟mock url不一样就行

已参与了 SegmentFault 思否「问答」打卡,欢迎正在阅读的你也加入。
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏