admin 管理员组

文章数量: 1087652

Angular 5 反向代理配置

一、webpack server 方式

这里所说的反向代理仅限于基于Angular-cli创建的HTTP Server,也就是通过ng、cnpm、npm启动的Server。

  1. 在项目根目录新建proxy.config.json
  2. 填入以下内容
{"/api": {"target": "http://localhost:8080","secure": "false","pathRewrite": {"^/api": ""}}
}
  1. 启动程序时 添加 –proxy proxy.config.json
    ng serve --proxy proxy.config.json

或者编辑package.json:

    "scripts": {"ng": "ng","start": "ng serve --proxy proxy.config.json --host xxx.com --port 80",# 在ng server之后添加--proxy proxy.config.json"build": "ng build","test": "ng test","lint": "ng lint","e2e": "ng e2e"},

然后直接以cnpm(npm) start启动项目即可。

关于Angular Proxy的更多信息，可以查看官方文档：
Angular Proxy

二、nginx.conf 配置示例

实际的生产环境我用的是nginx，这里也把简单的配置发出来。

nginx.conf:

  ...gzip on;gzip_min_length 1k;gzip_buffers 4 16k;gzip_http_version 1.1;gzip_disable "MSIE [1-6].";gzip_comp_level 4;gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;gzip_vary off;# 后端服务器upstream myserver {server 127.0.0.1:8080;keepalive 2000;}server {listen       80;#域名 server_name  xxx.com;charset utf-8;#access_log  logs/host.access.log  main;error_page  404              /404.html;# redirect server error pages to the static page /50x.html#error_page   500 502 503 504  /50x.html;location = /50x.html {}location / {# ng build生成的文件夹目录root   /Users/qiqj/WebstormProjects/ng5-base/dist;try_files $uri $uri/ /index.html =404;index  index.html;}location ~ ^\.(js)$ {# ng build生成的文件夹目录root /Users/qiqj/WebstormProjects/ng5-base/dist;}# 静态文件location /assets {alias /Users/qiqj/WebstormProjects/ng5-base/dist/assets/;}# 后端请求代理转发location /api/ {# http://myserver/ #最后一个斜杠不可少，否则接口url会带上/api/目录proxy_pass   http://myserver/;proxy_set_header x-forwarded-host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;            proxy_redirect  off;  client_max_body_size    2000m;}}

本文标签： Angular 5 反向代理配置

版权声明：本文标题：Angular 5 反向代理配置 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1686651179a20482.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。