webpack 代理 的规则 转发_vue项目代理转发 webpack devserver - CSDN
精华内容
参与话题
  • 前端同学进行开发的时候,经常需要调用远程的API请求数据,但囿于浏览器的同源策略不能直接发送跨域的请求,通常来说解决方案有: - 添加一层nodejs进行接口转发 - 使用webpack的dev-server代理一下在使用了...

    前端同学进行开发的时候,经常需要调用远程的API请求数据,但囿于浏览器的同源策略不能直接发送跨域的请求,通常来说解决方案有: 
    - 添加一层nodejs进行接口转发 
    - 使用webpack的dev-server代理一下

    在使用了webpack的项目里用dev-server还是很方便的。如果没有使用webpack也不想多写一层node的话,可以使用fiddler的AutoResponder转发请求。 
    这里写图片描述

    选中Enable rules和Unmatched request passthrough,激活AutoResponder 
    这里写图片描述 
    根据选项提示看出,左边一栏里是请求的URL,右边是响应的URL,点击Add Rule可以在底部添加规则。

    一个例子

    首先简单粗暴上一个例子,如果我想要请求http://localhost:8080/api时获得请求http://xxxx.xx/api的效果,可以这么写:

    if request matches:REGEX:http://localhost:8080/api(?.*)$ 
    then respond with: http://xxxx.xx/api${argvs} 
    就可以了。

    匹配规则

    • 匹配时规则列表中出现的顺序进行匹配, 按+键可以使规则向上移一项,按-键可以使规则向下移一项
    • 键菜单可以导出一个包含了所有的匹配规则和对应响应字符串的后缀为 .FARX 的文件
    • 可以通过导入 .SAZ or .FARX 文件来创建基于以前创建的规则列表
    • 可以从会话列表中拖动一个会话到AutoResponder选项卡中来重新演示以前的响应.
    • 也可以直接从Windows的资源管理器中拖动一个文件到 AutoResponder选项卡中来为这些文件创建规则

    规则写的时候使用不同的前缀代表不同的含义,常用的前缀有REGEXEXACTNOT和不使用前缀。

    • REGEX: 使用正则表达式进行匹配(简直万能)
    • EXACT: 匹配时区分字母的大小写
    • NOT: 待匹配的字符串中不包含当前的匹配串
    • 不使用前缀: 匹配时不区分字母大小写

    写好了匹配规则后点右边的test可以进行测试,如图 
    这里写图片描述 
    在Test URL中可以随便写字符串进行测试,蓝绿色表示匹配,红色表示不匹配。确定了匹配规则后点击右边的save使规则生效。

    fiddler官方文档

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Panda_m/article/details/77892468
    展开全文
  • 通过webpack-dev-server中间件代理访问配置在nginx上的反向代理服务端口,从而实现跨域请求资源。 最终实现 webpack配置 devServer: { host: 'localhost', port: 8000, proxy: { // 代理配置 '/v1':{ target: ...

    项目需求:

    通过webpack-dev-server中间件代理访问配置在nginx上的反向代理服务端口,从而实现跨域请求资源。

    最终实现

    webpack配置

    devServer: {
        host: 'localhost',
        port: 8000,
        proxy: {  // 代理配置
          '/v1':{
            target: "http://localhost:8001", // 代理服务器地址,nginx会监听此接口下的请求,并代理请求真正的网址
            pathRewrite: {'^/v1' : ''}
          }
        }
      }
    

    nginx配置

    resolver 8.8.8.8; #配置域名进行访问的时候,需要配置此项目,否则会报502错误
    server {
       listen       8001; #代理服务器端口
       server_name  localhost; #域名
       location / { #路由规则 代理所有请求到https://u.y.qq.com/cgi-bin/musicu.fcg
           proxy_pass  https://u.y.qq.com/cgi-bin/musicu.fcg?$query_string;
       	}
     }
    

    实现过程中的各种坑

    为了自己以后不在这种地方犯迷糊,也希望能给大家一些帮助,所以总结一下我遇到的各种坑

    1. 如何保证webpack代理到正确的路径

    首先我们要清除webpack-dev-server的转发机制,就以我上面代码中的设置

    host: 'localhost',
    port: 8000,
    proxy: {  // 代理配置
          '/v1':{
            target: "http://localhost:8001", 
          }
    

    这个代理的结果就是

    访问http://localhost:8000/v1 → 代理监听到这个请求 → 转发到http://localhost:8001/v1

    可以看到这层代理只是更改了域名http://localhost:8000部分后面的路径完全照搬,所以在nginx的代理规则中我们一定要清楚的认识到从webpack-dev-server转发过来地url是怎么样的。

    另外一定要注意的是,这个监听的是以/v1开头的所有url,不管你是/v1aa还是/v1/aa,只要是以/v1开始就行,

    不要使用正则,例如/v1/*,这个匹配的是以 /v1/*xxx而不是/v1/xxx都是血泪教训,

    另外我还不清楚这个配置能否使用正则,知道的朋友可以告诉我一下.

    如果要取消后面的部分路径怎么办呢

        proxy: {  // 代理配置
          '/v1':{
            target: "http://localhost:8001", 
            pathRewrite: {'^/v1' : ''}
          }
    

    通过pathRewrite: {'^/v1' : ''}路径重写方法,将路径中的部分内容重写为想要的内容,具体使用方法请自行百度。

    2. 如何保证nginx正确转发

    现在我们知道了,向nginx服务器发起的请求地址为http://localhost:8001/v1,现在就可以在nginx配置中着手处理请求了。

    resolver 8.8.8.8; #配置域名进行访问的时候,需要配置此项目,否则会报502错误
    server {
       listen       8001; #因为请求的是8001端口,所以我们监听这个端口
       server_name  localhost; #域名的作用同端口
       location / { #路由规则 代理所有请求到https://u.y.qq.com/cgi-bin/musicu.fcg
           proxy_pass  https://u.y.qq.com/cgi-bin/musicu.fcg?$query_string;
       	}
     }
    

    整个匹配机制的关键就在于

    location / { 
           proxy_pass  https://u.y.qq.com/cgi-bin/musicu.fcg?$query_string;	
    }
    

    这个部分中的location的意思就是url中除去域名的部分,以http://localhost:8001/v1为例

    location就是/v1

    location /中的/就是匹配的关键,具体见下

    = 开头表示精确匹配

    ^~ 开头表示url以某个常规字符串开头,理解为匹配url路径即可,nginx不对url做编码,因此请求为/static/20%/aa,可以被规则 ^$ /static/ /aa 匹配到
    区分大小写的正则匹配

    ~* 不区分大小写的正则匹配

    !~ !~* 区分大小写不匹配及不区分大小写不匹配的正则

    / 通用匹配,任何请求都会匹配到

    同时这个匹配机制是由顺序的,顺序为

    多个location配置的情况下匹配顺序

    为首先匹配 =

    其次匹配 ^~

    其次是按文件中的顺序的正则匹配,

    最后是交给 / 通用匹配。

    当匹配成功的时候,停止匹配,按当前匹配规则处理请求。

    因为我的当前项目暂时没有其他转发需求,所以我配置的所有请求都转发到同一个地址.

    3. nginx一些内置参数的含义

    $args : #这个变量等于请求行中的参数,同$query_string
    $content_length : 请求头中的Content-length字段。
    $content_type : 请求头中的Content-Type字段。
    $document_root : 当前请求在root指令中指定的值。
    $host : 请求主机头字段,否则为服务器名称。
    $http_user_agent : 客户端agent信息
    $http_cookie : 客户端cookie信息
    $limit_rate : 这个变量可以限制连接速率。
    $status  请求状态
    $body_bytes_sent 发送字节
    $request_method : 客户端请求的动作,通常为GET或POST。
    $remote_addr : 客户端的IP地址。
    $remote_port : 客户端的端口。
    $remote_user : 已经经过Auth Basic Module验证的用户名。
    $request_filename : 当前请求的文件路径,由root或alias指令与URI请求生成。
    $scheme : HTTP方法(如http,https)。
    $server_protocol : 请求使用的协议,通常是HTTP/1.0或HTTP/1.1。
    $server_addr : 服务器地址,在完成一次系统调用后可以确定这个值。
    $server_name : 服务器名称。
    $server_port : 请求到达服务器的端口号。
    $request_uri : 包含请求参数的原始URI,不包含主机名,如:”/foo/bar.php?arg=baz”。
    $uri : 不带请求参数的当前URI,$uri不包含主机名,如”/foo/bar.html”。
    $document_uri : 与$uri相同。
    

    其中$args$query_string的内容是一样的,都是url中的参数字符串.假设一个url为http://localhost:8000/v1/?a=1&b=2&c=3

    $args的值为a=1&b=2&c=3

    这里需要注意这个部分是不带?的所以在转发拼接参数的时候一定要带上?

    例如:proxy_pass https://u.y.qq.com/cgi-bin/musicu.fcg?$query_string;

    最后:希望以后我不在为这个问题苦恼大家也一样.最后祝大家编码愉快,头发茂盛。

    展开全文
  • index.html <!DOCTYPE html> <html lang="en">  <head>  <meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0">......
    index.html
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>html template</title>
      </head>
      <body>
        <div id='root'></div>
      </body>
    </html>

    index.js

    import React, {Component} from 'react';
    import ReactDom from 'react-dom';
    import axios from 'axios';
    class App extends Component{   render() {     
    return (       <div>hello world</div>     )   }   componentDidMount(){     axios       .get('/react/api/header.json')       .then((res)=>{         console.log(res);       })   } } ReactDom.render(<App/>, document.getElementById('root'));

    使用 npm run dev ("webpack-dev-server --config ./build/webpack.common.js")打包进行开发。这个时候这个接口会报错。因为localhost下面没有这个接口,那我们去请求线上的(在对方服务器允许我们跨域的时候)。我们看webpack怎么配置https://webpack.js.org/configuration/dev-server#devserverproxy。可以看到dev下面有个devServer:proxy的配置项。通过这个配置项就可以很方便进行本地接口的调试

    module.exports = {
      devServer: {
        contentBase:'./dist',
        open:true,
        hot: true,
        proxy: {
          '/react/api': 'http://www.xxx.com'
        }
      }
    }

    配置一个proxy。意思是在/react/api下面的接口走的都是http://www.xxx.com的/react/api接口。

    但是如果这个线上的接口没有好,需要用假数据。后端给了一个demo.json的临时数据用,可以这么配置
    module.exports = {
      devServer: {
        contentBase:'./dist',
        open:true,
        hot: true,
        proxy: {
          '/react/api': {
            target: 'http://www.xxx.com',
            pathRewrite: {
              'header.json': 'demo.json'
            }
          }
        }
      }
    }

    这个的意思是,如果用户请求/react/api下的接口时,首先会到www.xxx.com下面去拿数据,但拿数据的时候他还有些规则,如果拿的是header.json的数据,其实不是拿header.json下的数据,而是demo.json的数据。

     

    最后这个proxy是devServer的proxy,这就意味着只有在开发环境下,我们对proxy的配置才会生效,因为只有开发环境下才会使用。如果这个网址是https的时候,需要加个配置支持,secure:false
    module.exports = {
      devServer: {
        contentBase:'./dist',
        open:true,
        hot: true,
        proxy: {
          '/react/api': {
            target: 'https://www.xxx.com',
            secure: false
          }
        }
      }
    }

    这里我们只讲了一个路径,/react/api,如果有多个路径怎么办呢,可以放在context里面去管理

    module.exports = {
      devServer: {
        proxy: [{
          context: ['/auth', '/api'],
          target: 'http://localhost:3000',
        }]
      }
    };

    他的意思是你访问 /auth 或者 /api 这个路径的时候,都会代理到localhost:3000这个域名下。

     

    除了这些,还有一些其他的配置。https://github.com/chimurai/http-proxy-middleware#options
     

     

    转载于:https://www.cnblogs.com/wzndkj/p/10885286.html

    展开全文
  • 最近遇到公司的一些项目,是纯静态的不用编译的普通项目,由于前端会跨域,这些项目他们原来是使用Nginx做服务器,然后进行请求的代理转发。但是由于我之前没有怎么接触过Nginx,一些配置基本上都不是很懂,每次都要...

            最近遇到公司的一些项目,是纯静态的不用编译的普通项目,由于前端会跨域,这些项目他们原来是使用Nginx做服务器,然后进行请求的代理转发。但是由于我之前没有怎么接触过Nginx,一些配置基本上都不是很懂,每次都要去搜一下配置方法。所以我自己就是用express框架去做一个服务器,然后进行请求的代理转发。

            首先需要准备的是,express框架,然后就是http-proxy-middleware这个中间件,最后就是把你的静态项目放到express的public目录下(因为我是使用express-generator脚手架生成的,public是存放静态文件目录)

           之前利用express框架使用http-proxy-middleware去转发请求,都是只是转发到同一个目标服务器,因为普通页面的请求也就一两三个,都跑到同一服务器了。现在一个页面有多个请求,请求到不同服务器。故需要对原来的转发配置代码进行一些简单的修改,以适应开发需求。

            我们知道在vue脚手架生成的项目中,webpack-dev-server也是可以进行代理转发的,它也是利用http-proxy-middleware进行代理转发的,如果你有用过这个,那么上手http-proxy-middleware这个中间件也是比较容易的,因为一般就只用到那几个字段进行配置,而且配置方法基本一模一样。

            在webpack的官网文档中,最简单的代理转发例子是这样子的

     当时因为vue项目的接口都是跑到同一个服务器域名下,所以这里总是设置一个服务器转发规则,也没有去注意到多写几个就是多几条转发到不同服务器的规则。受到这个启发,我在想把以前http-proxy-middleware的转发配置给改改,变成类似vue脚手架这里的可配置多条规则的配置文件。我的思路很简单,就是写个配置文件,然后在express的主文件(app.js)里面循环遍历配置文件信息,然后就可以实现转发多个配置规则的转发服务器。有了这个思路那么就可以来写一个简单的配置文件了。

            先贴上转发列表的代码,有用过应该可以理解,如下:

    // proxy.config_list.js
    var proxy_config = {
        test: [
            {
                from: '/example1',              // 请求
                target: 'localhost:3100',       // 目标服务器
                changeOrigin: true,             // 默认false,是否需要改变原始主机头为目标URL
            },
            {
                from: '/example2',
                target: 'localhost:3101',
                changeOrigin: true,
            },
            {
                from: '/example3',
                target: 'localhost:3102',
                changeOrigin: true,
            },
            {
                from: '/example4',
                target: 'localhost:3103',
                changeOrigin: true,
            }
        ]
    }
    
    // 这里只是增加了请求的console打印而已
    let data = proxy_config.test
    let output = []
    for (let i = 0; i < data.length; i++) {
        let p = {
            from: data[i].from,
            target: data[i].target,
            changeOrigin: data[i].changeOrigin,
            onProxyReq: function (proxyReq, req, res) {
                console.log('来自:', getIp(req), '的转发请求:', req.method, req.url, req.hostname)
            }
        }
        p.pathRewrite = {}
        p.pathRewrite['^' + data[i].from] = '/'
        output.push(p)
    }
    
    // 获取来自请求主机的ip
    var getIp = function(req) {
        var ip = req.headers['x-real-ip'] ||
            req.headers['x-forwarded-for'] ||
            req.socket.remoteAddress || '';
        if(ip.split(',').length>0){
            ip = ip.split(',')[0];
        }
        return ip;
    }
    
    module.exports = output

    接下来是在app.js里面的循环遍历配置文件的操作,如下:

    var createError = require('http-errors');
    var express = require('express');
    var path = require('path');
    var cookieParser = require('cookie-parser');
    var logger = require('morgan');
    
    var indexRouter = require('./routes/index');
    var usersRouter = require('./routes/users');
    
    
    const proxy = require('http-proxy-middleware')
    var app = express();
    
    // 引用代理转发配置
    var myProxyConfig = require('./proxy.config_list.js')
    // use proxy
    for (let j = 0; j < myProxyConfig.length; j++) {
        let myProxy = proxy(myProxyConfig[j])
        app.use(myProxyConfig[j].from, myProxy)
    }
    
    // view engine setup
    app.set('views', path.join(__dirname, 'views'));
    app.set('view engine', 'jade');
    
    app.use(logger('dev'));
    app.use(express.json());
    app.use(express.urlencoded({ extended: false }));
    app.use(cookieParser());
    app.use(express.static(path.join(__dirname, 'public')));
    
    app.use('/', indexRouter);
    app.use('/users', usersRouter);
    
    // catch 404 and forward to error handler
    app.use(function(req, res, next) {
      next(createError(404));
    });
    
    // error handler
    app.use(function(err, req, res, next) {
      // set locals, only providing error in development
      res.locals.message = err.message;
      res.locals.error = req.app.get('env') === 'development' ? err : {};
    
      // render the error page
      res.status(err.status || 500);
      res.render('error');
    });
    
    module.exports = app;
    

            基本上上面的代码一看就能明白,了解了思路自己搞一遍也就懂了,也不是什么很难的问题。就是一些小技巧帮助自己在开发过程中解决一些简单的问题而已。若有更好的办法,可以告诉我一下,学习学习。 

     

    展开全文
  • 第一章 Webpack 简介 1.1 Webpack 是什么 是一种前端资源构建工具,一个静态模块打包器(nodule bundle) 前端所有资源文件(js/json/css/img…)都会作为模块处理 它将根据模块的依赖关系进行静态分析,打包生成...
  • 使用Fiddler的AutoResponder转发请求

    千次阅读 2017-09-08 11:11:36
    前端同学进行开发的时候,经常需要...- 使用webpack的dev-server代理一下在使用了webpack的项目里用dev-server还是很方便的。如果没有使用webpack也不想多写一层node的话,可以使用fiddler的AutoResponder转发请求。
  • webpack-js篇

    千次阅读 2020-01-30 12:25:37
    webpack 自动化构建工具 Javascript打包
  • 1.下载vue-cli npm install vue-cli -g vue-cli的使用与详细介绍,可以到github上获取... 2.安装webpack项目模版 vue init 比如: vue init webpack my-project 之后可以在当前目录下下载该模版,然后 npm install
  • 从零开始学习搭建webpack

    万次阅读 2020-10-12 14:11:51
    文章目录一、安装webpack2.安装webpack-cli二、打包三、 手动配置webpack1.基础配置entry 入口文件 output输出文件resolve 配置默认查询后缀devtool配置webpackDevSever配置HotModule Replacement 热模块更新proxy...
  • 前端工程化之动态数据代理

    千次阅读 2017-01-23 19:22:54
    引言 在前端开发过程中,开发者通常都会遇到前端数据不能正常获取的问题,这就需要开发者之间’想办法‘搞到这些数据;开发过程中我们可能遇到的场景: 后端接口数据开发中暂时不可用,需要前端在自己本地mock...
  • Webpack自动化模块加载及构建#2

    千次阅读 2016-09-23 12:58:38
    Webpack自动化模块加载及构建#2
  • 一篇弄懂webpack静态资源打包器

    千次阅读 2020-10-01 16:48:38
    webpack是优秀的前端构建工具,静态资源打包器,可以根据模块依赖关系进行静态资源分析,快速打包生成相对应浏览器可以直接识别的静态资源! 规约 入口文件: 开始打包第一个文件称为入口文件,通常经过在入口文件中...
  • 1、.roadhogrc.mock.js   roadhog支持mock功能,如需mock 功能,在 .roadhogrc.mock.js 中添加配置即可,在开发环境下启动server时,将开启mock功能;...// 是否禁用代理 const noProxy = process.env.NO_PROXY =...
  • Vue全家桶实践(一)---vue-cli

    千次阅读 2018-01-25 15:14:07
    最近公司要重写运营管理系统,不想再维护之前的backbone了,赶紧要求前端整个重写。重开新坑,用了两周多撸出了第一版,收获很大。在实践中学习永远都是最高效的。趁热把学到的东西都记录总结下来,也算前端梳理一下...
  • Vue CLI 4.0 关于 webpack 基本配置范例

    千次阅读 2020-06-18 11:30:35
    从Vue CLI 3.0 开始,Webpack的配置文件从webpack.config.js变为了vue.config.js。此外,Vue 对配置文件的写法也进行了一些改动。因此,本文参考其他大神的对webpack的说明以及Vue CLI 4.0 关于webpack的说明文档。...
  • proxyTable里面配置如果两个接口有相同的前缀,则会直接使用前面的,不会用后面的 例如 '/aaa/bb/ccc': { target: 'xxx', prependPath: true, changeOrigin: true, secure: false }, ...'/aaa/bb/cccccc': { ...
  • 通过 Nginx 代理转发配置实现跨域(API 代理转发)阅读 2285收藏 1192017-04-08原文链接:www.thinktxt.com1元视频体验视频通话10000分钟cloud.tencent.com在WEB开发中,我们经常涉及到跨域的请求,解决跨域问题的...
  • 1.采用webpack打包文件,按需引入js和css 2.采用vue2.0组件化开发方式 3.根据项目需要,使用npm run dev和npm run build 可以分别运行dev脚本和build脚本进行不同的构建操作,dev脚本可以直接在本地建立一个服务器...
  • 使用 vue-cli 可以快速创建 vue 项目,vue-cli很好用,但是在最初搭建环境安装vue-cli及相关内容的时候,对一些人来说是很头疼的一件事情,本人在搭建vue-cli的项目环境的时候也是踩了相当多的坑,特此写了一篇搭建...
  • webpack基础配置(多页面应用)

    千次阅读 2018-12-06 10:26:03
    webpack基础配置 第一次自己从头些webpack的配置,记录下使用过的配置的作用和遇到的问题。因为是按照自己多页面应用的配置来说的,所以和vue、react的配置有些不同,如果有错误,欢迎大家指出 entry webpack打包的...
1 2 3 4 5 ... 20
收藏数 674
精华内容 269
关键字:

webpack 代理 的规则 转发