zoukankan      html  css  js  c++  java
  • Vue项目devServer.proxy代理配置详解

    如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。可以通过 *.config.js 中的 devServer.proxy 选项来配置。

    config.js文件中,引入依赖项

    const proxy = require('http-proxy-middleware');

    devServer.proxy 可以是一个指向开发环境 API 服务器的字符串

    //服务器会将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000上
    module.exports = {
      devServer: {
        proxy: 'http://localhost:4000'
      }
    }

    更多的代理控制行为:

    const proxy = require('http-proxy-middleware');
    
    module.exports = {   
    devServer:{
        host: 'localhost',//target host
        port: 8080,
        //proxy:{'/api':{}},代理器中设置/api,项目中请求路径为/api的替换为target
        proxy:{
            '/api':{
                target: 'http://192.168.1.30:8085',//代理地址,这里设置的地址会代替axios中设置的baseURL
                changeOrigin: true,// 如果接口跨域,需要进行这个参数配置
                //ws: true, // proxy websockets
                //pathRewrite方法重写url
                pathRewrite: {
                    '^/api': '/' 
                    //pathRewrite: {'^/api': '/'} 重写之后url为 http://192.168.1.16:8085/xxxx
                    //pathRewrite: {'^/api': '/api'} 重写之后url为 http://192.168.1.16:8085/api/xxxx
               }
        }}
    },
    //...
    }
  • 相关阅读:
    每日日报1
    shazidouhui的使用体验
    水滴的使用体验
    麻雀记的使用体验
    钢镚儿的使用体验
    TD课程通的使用体验
    01 fs模块
    0 mysql 安装
    slot
    vue引入 lodash
  • 原文地址:https://www.cnblogs.com/yuwenjing0727/p/13712094.html
Copyright © 2011-2022 走看看