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
,然后通过target
和pathRewrite
将其更新为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开发时代理,决解开发时跨域问题