Question

https://github.com/angular/angular-cli#proxy-to-backend这里是一个如何代理后端的指令。我一步一步做了所有事情，仍然没有代理请求。

8080 - 我的快递后端 4200 - 我的Angular2前端

在Angular2项目中，我有proxy.cons.json文件，内容如下：

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false
  }
}

在Angular2 package.json中，我将start程序更改为"start": "ng serve --proxy-config proxy.conf.json"

当我在指挥官npm start内输入时，我可以在开始时看到Proxy created: /api -> http://localhost:8080。好吧，到目前为止我觉得很好。

我正在尝试发送请求（Angular2）

  constructor(private http: Http) {
    this.getAnswer();
  }

  getAnswer(): any {
    return this.http.get("/api/hello")
      .subscribe(response => {
        console.log(response);
      })
  }

我收到http://localhost:4200/api/hello 404 (Not Found)的错误。我们可以看到，没有任何代理。为什么？我做错了吗？

要清楚。当我手动转到http://localhost:8080/hello时，一切正常。在后端没有什么可以寻找的。

Answer 1

你可以试试这个：

{
  "/api": {
    "target": "http://url.com",
    "secure": false,
    "pathRewrite": {"^/api" : ""}
  }
}

它对我有用，

** NG Live Development Server is running on http://localhost:4200. **
 10% building modules 3/3 modules 0 active[HPM] Proxy created: /api  ->  http://ec2-xx-xx-xx-xx.ap-south-1.compute.amazonaws.com
[HPM] Proxy rewrite rule created: "^/api" ~> ""

Answer 2

这对我来说很接近。还必须添加

#include <iostream>
#include <cstdlib>
#include <util_init.hpp>

#define APP_SHORT_NAME "vulkansamples_instance"

int main(int argc, char *argv[]) {
    struct sample_info info = {};
    init_global_layer_properties(info);

    /* VULKAN_KEY_START */

    // initialize the VkApplicationInfo structure
    VkApplicationInfo app_info = {};
    app_info.sType = VK_STRUCTURE_TYPE_APPLICATION_INFO;
    app_info.pNext = NULL;
    app_info.pApplicationName = APP_SHORT_NAME;

    app_info.applicationVersion = 1;
    app_info.pEngineName = APP_SHORT_NAME;
    app_info.engineVersion = 1;
    app_info.apiVersion = VK_API_VERSION_1_0;

    // initialize the VkInstanceCreateInfo structure
    VkInstanceCreateInfo inst_info = {};
    inst_info.sType = VK_STRUCTURE_TYPE_INSTANCE_CREATE_INFO;
    inst_info.pNext = NULL;
    inst_info.flags = 0;
    inst_info.pApplicationInfo = &app_info;
    inst_info.enabledExtensionCount = 0;
    inst_info.ppEnabledExtensionNames = NULL;
    inst_info.enabledLayerCount = 0;
    inst_info.ppEnabledLayerNames = NULL;

    VkInstance inst;
    VkResult res;
    res = vkCreateInstance(&inst_info, NULL, &inst);

    if (res == VK_ERROR_INCOMPATIBLE_DRIVER) {
        std::cout << "cannot find a compatible Vulkan ICD\n";
        exit(-1);
    }

    else if (res) {
        std::cout << "unknown error\n";
        exit(-1);
    }

    vkDestroyInstance(inst, NULL);

    /* VULKAN_KEY_END */

    return 0;
}

完整的proxy.conf.json如下所示：

"changeOrigin": true,

Answer 3

我必须根据上面的答案做一个小调整，虽然看起来现在看起来有点奇怪。

这是我的proxy.conf.json，如下所示：

{
  "/api/*": {
     "target": "https://url.com",
     "secure": false,
     "changeOrigin": true,
     "logLevel": "debug",
     "pathRewrite": {"^/api" : "http://url.com/api"}
  }
}

基本上，我完全重写了这条道路。它现在有效。

Answer 4

在 MAC 上，这对我有用

Angular 4正在运行 localhost： http://localhost:4200/

在 package.json
中

"start": "ng serve --proxy-config proxy.config.json",

在 proxy.config.json
中

我们的公司服务器 将替换为非现场网址

{
  "/v1": {
    "target": "https://our-company-server.com:7002",
    "secure": false,
    "logLevel": "debug"
  }
}

有角度 GET 请求的地方......

this.http.get('/v1/dashboard/client', options).map...

// options are headers, params, etc...
// then .map the observable in this case.

Answer 5

这对我有用proxy.config.json文件

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

并在package.json中添加“ ng serve --proxy-config proxy.config.json” 并运行命令npm start

Answer 6

    Please follow below steps

    1 In Angular project create a file called  **proxy.cons.json** with content like this:

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

    2 edit package.json file and add below code

      "start": "ng serve --proxy-config proxy.conf.json"


    3 call your backend api like this

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

    4 run npm start or ng serve --proxy-config proxy.conf.json

Answer 7

对于具有自定义localhost域的用户，请参考this解决方案

{
  "/api/*": {
    "target": "http://backend.site.example",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": {
      "^/api": "http://backend.site.example/api"
    }
  }
}

Answer 8

逐步解决问题后，我遇到了类似的问题，成功地构建了angular 8项目
并将 dist 文件夹内容传输到

主要/资源/静态

然后我在port 8080上运行我的spring boot应用程序，但是只有第一个有角度的项目模板可以在控制台上使用此消息错误进行操作

错误：未捕获（承诺）：
NullInjectorError：StaticInjectorError（to）[a]：
StaticInjectorError（平台：核心）[a]： NullInjectorError：没有提供者！ StaticInjectorError（平台：核心）[a]：

这是我的proxy.conf.json文件

 {
      "/token": {
        "target": "http://localhost:8080/",
        "secure": false,
        "pathRewrite": {"^/token" : ""}
      }
    }

Answer 9

代理属性 pathRewrite 应该添加到proxy.conf.json中。请参见下面的示例。 { "/services/*": { "target": "http://yoururl.com", "secure": false, "changeOrigin" : true, "pathRewrite": { "^/services" : "" } } }

并运行 ng serve --proxy-config proxy.conf.json 当然可以。

Answer 10

尝试以下操作，多数情况下将是以下之一：

添加以下内容：

"changeOrigin": true,
"pathRewrite": {"^/service" : ""}

运行

ng serve --proxy-config proxy.config.json

Answer 11

我真的不知道为什么，但在 angular 11 中，唯一对我有用的解决方案是以下 proxy.conf.json（没有任何其他参数）：

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false
  }
}

此外，在 angular 11 中，您可以选择在 angular.json 中设置正确的代理配置，而无需将其设置为 npm commnand 的参数：

...
"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "angular-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    },
...

后端的Angular-CLI代理不起作用

11 个答案: