Webpack-dev-server 不通过代理向外部域发送请求

Posted

技术标签:

【中文标题】Webpack-dev-server 不通过代理向外部域发送请求【英文标题】:Webpack-dev-server not sending requests to external domain via proxy 【发布时间】:2016-07-25 12:34:54 【问题描述】:

我正在尝试使用 webpack-dev-server 代理配置将 api 请求发送到外部域,但我似乎无法使其正常工作。

这是我的配置:

var path = require('path')

module.exports = 
    entry: './client/index.js',
    output: 
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'public/assets'),
        publicPath: 'assets'
    ,
    devServer: 
        contentBase: 'public',
        proxy:
            '/api/v1*': 
                target: 'http://laravelandwebpack.demo/',
                secure: false
            
        
    

所以,每当我的应用程序使用 uri /api/v1... 发出请求时,它都应该将该请求发送到 http://laravelandwebpack.demo

在我的 Vue 应用程序中,我使用 vue-resource 发出请求,并且默认所有请求都带有所需的 uri 前缀:

var Vue = require('vue')
Vue.use(require('vue-resource'))

new Vue(
    el: 'body',
    http: 
        root: '/api/v1', // prefix all requests with this
        headers:
            test: 'testheader'
        
    ,
    ready: function ()
        this.$http(
            url: 'tasks',
            method: 'GET'
        ).then(function (response)
            console.log(response);
        , function (response)
            console.error(response);
        )
    
)

URL 的构造正确,但它们仍然指向localhost:8080,即 webpack-dev-server:

我阅读并重新阅读了 webpack-dev-server 的文档,但我无法弄清楚我在哪里设置错误。有什么想法吗?

【问题讨论】:

网址正确指向localhost:8080,因为那是您的开发服务器,只有在请求到达那里后,开发服务器才会代理它(也就是将其发送到)您提供的外部网址。 devtools 永远不会注意到代理。您的请求会发生什么情况,promise.catch() 是否记录错误?它是什么? (而且你没有使用 vue-cli 的 webpack 模板?) 【参考方案1】:

我找到了解决该问题的变通方法。在我的情况下,我需要将任何/api/* 路径的请求代理到我的后端,所以我绕过了任何不以 api 开头的请求。

示例: proxy: '*': target: 'http://localhost:8081', secure: false, rewrite: function(req) console.log('rewriting'); req.url = req.url.replace(/^\/api/, ''); , bypass: function(req, res, proxyOptions) if (req.url.indexOf('api') !== 0) console.log('Skipping proxy for browser request.'); return '/index.html'; else return false;

【讨论】:

你把这个对象放在了哪个配置文件中? 在 webpack 配置中的 devServer 内,【参考方案2】:

@Linus Borg 是对的。

URL 的构造正确,但它们仍然指向 localhost:8080,即 webpack-dev-server:

这没关系。

就我而言,我想获得http://m.kugou.com/?json=true。而且我用的是@Vue/cli ^3.0.0-beta.15,可能你需要根据情况修改你的代码。

所以,这就是我所做的:

App.vue

  axios.get('/proxy_api/?json=true').then(data => 
    console.log('data', data)
  )

vue.config.js

module.exports = 
  devServer: 
    proxy: 
      // proxy all requests whose path starting with /proxy_api to http://m.kugou.com/proxy_api then remove '/proxy_api' string
      '/proxy_api': 
        target: 'http://m.kugou.com',
        pathRewrite: 
          '^/proxy_api': '/'
        
      
    
    //or just change the origin to http://m.kugou.com
    // proxy: 'http://m.kugou.com'
  

我使用/proxy_api/?json=true,然后通过targetpathRewrite 将其更新为http://m.kugou.com/?json=true

'/proxy_api'用于区分url是否应该被代理。

我为什么要使用/proxy_api?易于区分。

我从http://m.kugou.com/?json=true 获得数据,而开发工具中的网址是http://localhost:8080/proxy_api/?json=true

看到了吗?没关系。

【讨论】:

以上是关于Webpack-dev-server 不通过代理向外部域发送请求的主要内容,如果未能解决你的问题,请参考以下文章

用于 CORS 请求的 webpack-dev-server 配置

webpack-dev-server 代理:带通配符的上下文

webpack-dev-server proxy代理

用webpack-dev-server开发时代理,决解开发时跨域问题

webpack-dev-server proxy代理,get请求成功,post请求失败

用webpack-dev-server开发时代理,决解开发时跨域问题