zoukankan      html  css  js  c++  java
  • Configure a proxy for your API calls with Angular CLI

    Table of contents

    Local development setup with Angular

    Nowadays you most probably use the Angular CLI (or some extension of it) for generating your local development setup. This also includes the ng serve command which is wired up in your package.json that gets generated:

    {
        ...
        "scripts": {
            "start": "ng serve"
        }
    }

    As such, when you execute npm startng serve will be invoked which is a command to the CLI to fire up its internal development server. That server is based on the Webpack dev server (at least as of now). You can then head over to http://localhost:4200 on your web browser and see your running application which is served straight from the file system. Behind the scenes happens a lot more, though (in the standard Angular setup). The webpack dev server is configured to automatically do the TypeScript compilation, compile eventual SASS to CSS and serve assets, all in memory without touching the file system (for perf reasons). Also it happens to automatically refresh the browser whenever something on your file system changes.

    Issue: Dev server plus backend API

    Things get a bit more interesting in a more real world setup where you have your Angular CLI development server running on http://localhost:4200 and your backend API (in whichever technology you like) running on some other port or even host, let’s say http://localhost:3000 (this could also be http://dev-123.mycompany.com or something else ofc).

    Local Angular CLI dev server without proxy

    When you then want to execute an HTTP call within the app, you’d have to write something like this, indicating the full path of your backend API.

    this.http.get('http://locahost:3000/api/users')
        .map(res => res.json());

    Obviously the base URL (i.e. the host) can be configured in a central place somewhere, such as via the environment.ts file (that gets generated by the Angular CLI). But there’s another issue as well. Unless you’re creating some publicly consumable API and you inject the required CORS headers, you’ll most probably get some CORS exceptions.

    Configuring your Angular CLI dev-server proxy

    There are different options:

    • add the proper CORS headers - This is definitely a must in case when you design a generic API where you don’t even know the consumer.
    • use a proxy - A proxy is a piece of software which is in between your JavaScript/Angular app doing the Ajax request and your backend API. This is the choice to go in a classic app.

    We will take a closer look at the 2nd approach here. What the dev-server proxy does is to simply take the browser request at the same domain+port where you frontend application runs and then forwards that request to your backend API server. CORS is a browser security issue and does not apply when doing “backend to backend” communication as is the case with a proxy in between.

    The HTTP call inside our Angular application can then be changed to this:

    this.http.get('/api/users')
        .map(res => res.json());

    With the proxy, our initial diagram would change to something like this:

    Local Angular CLI dev server with active proxy

    Let’s now see how we can setup our dev-server proxy. The Angular CLI uses Webpackunderneath. As a result also the dev-server we’ve been talking about so far is nothing else than the Webpack development server. Thus, the same configuration settings apply, which are described very well in the official Webpack docs.

    To set it up, we need to create a file proxy.conf.json at the root of our Angular CLI project. The content should look as follows

    {
      "/api/*": {
        "target": "http://localhost:3000",
        "secure": false,
        "logLevel": "debug",
        "changeOrigin": true
      }
    }

    All requests made to /api/... from within our application will be forwarded to http://localhost:3000/api/....

    Note the changeOrigin property. You will definitely have to set this to true when you’re using some virtual proxies (such as configured with Apache2) on your backend.

  • 相关阅读:
    《Unity3d-控制枪口的朝向代码》
    《Unity3D-鱼的方向 鱼的游动 控制代码》
    《unity3d-随机设置一个物体的scale的方法》
    《Unity3d-在地图中随机生成一个物体的代码》
    《Unity3D-控制检测碰撞以后触发的事件之敌人的攻击行为》
    《Unity3D-播放被打中的时候粒子的特效的代码》
    《Unity3D-敌人血条或者玩家血条控制的代码》
    《Unity3D-自动寻路功能的实现》
    Unity 行首不出现中文标点
    Unity 多级下拉菜单
  • 原文地址:https://www.cnblogs.com/matt1985/p/9823694.html
Copyright © 2011-2022 走看看