0

我有一个小前后端分离的项目，有开发环境和生产环境，所以想设置代理调用api。vue/cli 版本是 4.6.5。

文件结构：

src
 axios
  api.js
  request.js
 components
  home
   LastBlogs.vue
.env.development
.env.production
package.json
vue.config.js

.env.development：

    NODE_ENV = 'development'
    
    VUE_APP_BASE_API = '/dev-api'
    
    VUE_APP_API_ADDRESS= 'http://localhost:8080/blog/'

.env.生产：

    NODE_ENV = 'production'
    
    # base api
    VUE_APP_BASE_API = '/api'
    
    # api publicPath
    VUE_APP_API_ADDRESS= 'http://localhost:8080/blog'

vue.config.js：

    'use strict'
    var path = require('path')
    module.exports = {
        configureWebpack: {
            devtool: 'source-map'
        },
        assetsDir: 'static',
        devServer: {
            contentBase: path.join(__dirname, 'dist'),
            compress: true,
            port: 8001,
            proxy: {
                [process.env.VUE_APP_BASE_API]: {
                  target: [process.env.VUE_APP_API_ADDRESS], // api地址
                  changeOrigin: true,
                  ws: true,
                  pathRewrite: {
                    ['^' + process.env.VUE_APP_BASE_API]: '/api',
                  }
                }
              }
        }
    }

axios：</p> 

    import axios from 'axios'
    import qs from 'qs'
    // import {app} from '../main.js'
    
    console.log(process.env)
    
     /****** 创建axios实例 ******/
    const request = axios.create({
        baseURL: process.env.VUE_APP_API_ADDRESS,
        timeout:5000
    })
    
    // some code of interceptors
    export default request;

api.js：

    import request from './request.js'
    
    var api = process.env.VUE_APP_BASE_API //'/api'
    export function getLastBlogs(){
        return request({
            url: api+'/blog/lastBlogs',
            method: 'get'
        })
    }

我在 vue 文件中调用 api，如下所示：

    <script>
    import {getLastBlogs} from '@/axios/blogApi.js'
    export default {
        name: 'LastBlogs',
        data() {
            return {
                blogs: ["AAAA", "BBBB"]
            }
        },
        created: async function(){
                
            let res = await getLastBlogs();
            this.blogs = res.data
            }
    }
    </script>

我在终端收到 404： 404 错误：xhr.js:160 GET http://localhost:8080/blog/dev-api/blog/lastBlogs 404

并且后端的api没问题： 行 当我在浏览器中输入http://localhost:8080/blog/api/blog/lastBlogs时，我得到这个： {"code":"0","msg":"操作成功","data":[{"id":1,"blogUser":1,"blogTitle":"test1","blogDescription":"for test","blogContent":"ABABABAB","blogCreated":" 2020-09-20T10:44:01","blogStatus":0},{"id":2,"blogUser":1,"blogTitle":"test2","blogDescription":"for test","blogContent ":"BABABABABA","blogCreated":"2020-08-20T10:44:01","blogStatus":0}]}

我该怎么办？谢谢。

4

1 回答 1

0

因此，您正在配置 Vue CLI dev-server（在端口 8001 上运行）将所有请求代理/api到http://localhost:8080/blog/api（服务器），但同时将 Axios 配置为使用baseURL: process.env.VUE_APP_API_ADDRESS...这意味着 Axios 将所有请求直接发送到您的服务器而不是代理...

只需baseURL: process.env.VUE_APP_API_ADDRESS从 Axios 配置中删除它

我也相信您pathRewrite在代理配置中的选项不正确。

  1. 您将请求发送到/dev-api/blog/lastBlogs
  2. 请求转到 Vue 开发服务器 ( localhost:8001)
  3. 代理转换/dev-api为http://localhost:8080/blog/dev-api=http://localhost:8080/blog/dev-api/blog/lastBlogs
  4. pathRewrite应用于URL 的整个路径部分/blog/dev-api/blog/lastBlogs- - RegEx^/dev-api将不匹配

尝试更改pathRewrite为[process.env.VUE_APP_BASE_API]: '/api'

于 2020-10-08T08:39:45.963 回答