mirror of
https://github.com/angular/angular-cli.git
synced 2025-05-19 12:34:32 +08:00
139 lines
3.3 KiB
Markdown
139 lines
3.3 KiB
Markdown
# Proxy To Backend
|
|
|
|
Using the [proxying support](https://webpack.github.io/docs/webpack-dev-server.html#proxy) 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`
|
|
|
|
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.
|
|
|
|
We create a file next to our project's `package.json` called `proxy.conf.json` with the content
|
|
|
|
```json
|
|
{
|
|
"/api": {
|
|
"target": "http://localhost:3000",
|
|
"secure": false
|
|
}
|
|
}
|
|
```
|
|
|
|
You can read more about what options are available [here](https://webpack.github.io/docs/webpack-dev-server.html#proxy).
|
|
|
|
We can then edit the `package.json` file's start script to be
|
|
|
|
```json
|
|
"start": "ng serve --proxy-config proxy.conf.json",
|
|
```
|
|
|
|
Now in order to run our dev server with our proxy config, we can simply call `npm start`.
|
|
|
|
### Rewriting the URL path
|
|
|
|
One option that comes up a lot is rewriting the URL path for the proxy. This is supported by the `pathRewrite` option.
|
|
|
|
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.
|
|
|
|
In our `proxy.conf.json` file, we add the following content
|
|
|
|
```json
|
|
{
|
|
"/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:
|
|
|
|
```json
|
|
{
|
|
"/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:
|
|
|
|
```json
|
|
{
|
|
"/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`)
|
|
|
|
|
|
### 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.
|
|
|
|
```js
|
|
const PROXY_CONFIG = [
|
|
{
|
|
context: [
|
|
"/my",
|
|
"/many",
|
|
"/endpoints",
|
|
"/i",
|
|
"/need",
|
|
"/to",
|
|
"/proxy"
|
|
],
|
|
target: "http://localhost:3000",
|
|
secure: false
|
|
}
|
|
]
|
|
|
|
module.exports = PROXY_CONFIG;
|
|
```
|
|
|
|
and make sure to point to the right file
|
|
|
|
```json
|
|
"start": "ng serve --proxy-config 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.
|
|
|
|
```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;
|
|
```
|
|
|
|
again, make sure to point to the right file
|
|
|
|
```json
|
|
"start": "ng serve --proxy-config proxy.conf.js",
|
|
```
|