Proxy To Backend
代理后端
Using the proxying support in webpack's dev server we can highjack certain URLs and send them to a backend server.
We do this by passing a file to --proxy-config
使用 webpacks 開發(fā)服務(wù)器中的代理支持, 我們可以劫持某些 url 并將它們發(fā)送到后端服務(wù)器捺典。我們這樣做是通過傳遞一個(gè)文件給 --proxy-config 選項(xiàng)。
Say we have a server running on http://localhost:3000/api and we want all calls to http://localhost:4200/api to go to that server.
假設(shè)我們有一個(gè)服務(wù)器運(yùn)行在 http://localhost:3000/api 我們希望所有調(diào)用 http://localhost:4200/api 到該服務(wù)器上.
We create a file next to our project's package.json called proxy.conf.json with the content
我們在項(xiàng)目包旁邊創(chuàng)建一個(gè)文件 package.json 命名為 proxy.conf.json 和如下的內(nèi)容种远。
{
"/api": {
"target": "http://localhost:3000",
"secure": false
}
}
You can read more about what options are available here.
您可以閱讀更多關(guān)于此處.可用選項(xiàng)的信息屏歹。
We can then add the proxyConfig option to the serve target:
然后, 我們可以將 proxyConfig 選項(xiàng)添加到服務(wù)目標(biāo):
"architect": {
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "your-application-name:build",
"proxyConfig": "src/proxy.conf.json"
},
Now in order to run our dev server with our proxy config we can call ng serve.
現(xiàn)在, 為了運(yùn)行我們的開發(fā)服務(wù)器與我們的代理配置, 我們可以調(diào)用
ng serve.
After each edit to the proxy.conf.json file remember to relaunch the ng serve process to make your changes effective.
每次編輯到 proxy.conf.json 文件后, 記住重新啟動(dòng) ng serve 進(jìn)程, 使您的更改生效
Rewriting the URL path
重寫url路徑
One option that comes up a lot is rewriting the URL path for the proxy. This is supported by the pathRewrite option.
一個(gè)很重要的選項(xiàng)是重寫代理的 URL 路徑苏章。這由 pathRewrite 選項(xiàng)支持
Say we have a server running on http://localhost:3000 and we want all calls to http://localhost:4200/api to go to that server.
假設(shè)我們有一個(gè)服務(wù)器運(yùn)行在 http://localhost:3000, 我們希望所有調(diào)用 http://localhost:4200/api 到該服務(wù)器上轰传。
in our proxy.conf.json file, we add the following content
在我們的 proxy.conf.json 文件, 我們添加如下內(nèi)容
{
"/api": {
"target": "http://localhost:3000",
"secure": false,
"pathRewrite": {
"^/api": ""
}
}
}
If you need to access a backend that is not on localhost, you will need to add the changeOrigin option as follows:
如果您需要訪問不在本地主機(jī)上的后端，則需要添加 changeOrigin 選項(xiàng)要门，如下所示：
{
"/api": {
"target": "http://npmjs.org",
"secure": false,
"pathRewrite": {
"^/api": ""
},
"changeOrigin": true
}
}
To help debug whether or not your proxy is working properly, you can also add the logLevel option as follows:
為了幫助調(diào)試代理是否正常工作榜晦，您還可以添加 logLevel 選項(xiàng)冠蒋，如下所示：
{
"/api": {
"target": "http://localhost:3000",
"secure": false,
"pathRewrite": {
"^/api": ""
},
"logLevel": "debug"
}
}
Possible options for logLevel include debug, info, warn, error, and silent (default is info)
logLevel 的可能選項(xiàng)包括 debug, info, warn, error, 和 silent (默認(rèn)是info)
Multiple entries
多入口
If you need to proxy multiple entries to the same target define the configuration in proxy.conf.js instead of proxy.conf.json e.g.
如果需要將多個(gè)條目代理到同一目標(biāo)，請?jiān)?proxy.conf.js 中定義配置乾胶，而不是proxy.conf.json 中的配置抖剿，例如
const PROXY_CONFIG = [
{
context: [
"/my",
"/many",
"/endpoints",
"/i",
"/need",
"/to",
"/proxy"
],
target: "http://localhost:3000",
secure: false
}
]
module.exports = PROXY_CONFIG;
Make sure to point to the right file (.js instead of .json):
確保指向正確的文件 (.js 而不是 .json):
"architect": {
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "your-application-name:build",
"proxyConfig": "src/proxy.conf.js"
},
Bypass the Proxy
繞過代理
If you need to optionally bypass the proxy, or dynamically change the request before it's sent, define the configuration in proxy.conf.js e.g.
如果需要繞過代理，或者在請求發(fā)送前動(dòng)態(tài)更改請求识窿，請?jiān)趐roxy.conf.js中定義配置斩郎，例如。
const PROXY_CONFIG = {
"/api/proxy": {
"target": "http://localhost:3000",
"secure": false,
"bypass": function (req, res, proxyOptions) {
if (req.headers.accept.indexOf("html") !== -1) {
console.log("Skipping proxy for browser request.");
return "/index.html";
}
req.headers["X-Custom-Header"] = "yes";
}
}
}
module.exports = PROXY_CONFIG;
Using corporate proxy
使用企業(yè)代理
If you work behind a corporate proxy, the regular configuration will not work if you try to proxy
calls to any URL outside your local network.
如果您在公司代理的后面工作喻频，如果您嘗試將呼叫代理到本地網(wǎng)絡(luò)之外的任何URL缩宜，則常規(guī)配置將不起作用
In this case, you can configure the backend proxy to redirect calls through your corporate
proxy using an agent:
在這種情況下，您可以配置后端代理以使用代理通過公司代理重定向呼叫
npm install --save-dev https-proxy-agent
Then instead of using a proxy.conf.json file, we create a file called proxy.conf.js with
the following content:
然后甥温，我們不使用 proxy.conf.json 文件锻煌，而是使用以下內(nèi)容創(chuàng)建一個(gè)名為 proxy.conf.js 的文件：
var HttpsProxyAgent = require('https-proxy-agent');
var proxyConfig = [{
context: '/api',
target: 'http://your-remote-server.com:3000',
secure: false
}];
function setupForCorporateProxy(proxyConfig) {
var proxyServer = process.env.http_proxy || process.env.HTTP_PROXY;
if (proxyServer) {
var agent = new HttpsProxyAgent(proxyServer);
console.log('Using corporate proxy server: ' + proxyServer);
proxyConfig.forEach(function(entry) {
entry.agent = agent;
});
}
return proxyConfig;
}
module.exports = setupForCorporateProxy(proxyConfig);
This way if you have a http_proxy or HTTP_PROXY environment variable defined, an agent will automatically be added to pass calls through your corporate proxy when running npm start.
這樣，如果您定義了 http_proxy 或 HTTP_PROXY 環(huán)境變量姻蚓，則在運(yùn)行 npm start 時(shí)宋梧，會(huì)自動(dòng)添加代理以通過公司代理傳遞調(diào)用。
