跨源请求阻止CORS-使用angular cli解决[仅适用于开发人员]

最近我遇到了以下错误：

从源代码访问“localhost:8080/api/xyz”处的XMLHttpRequest “”已被CORS策略阻止：跨源 请求仅支持协议方案：http、数据、chrome、， chrome扩展，https

Angular为这个问题提供了一个简单的解决方案，但我花了足够多的时间才找到它。我没有发现任何关于直截了当的东西，所以在Angular的文档中也没有

显然，这个误差与角度无关。我相信几乎每个开发人员都会不时遇到这种错误，我想分享一个简单的解决方案，这样我们就可以继续进行重要的工作

首先，我的设置： 角度7，以及使用

HttpClient

（）

我创建了一个小服务：

export class HelloServerService {
  private readonly rootApi: string = 'http://localhost:8080/api/';

  constructor(@Inject(HttpClient) private readonly http: HttpClient) {
  }

  public getHelloWorld(name: string): Observable<string> {
    return this.http.get(this.rootApi + name, {responseType: 'text', params: {}}) as Observable<string>;
  }
}

导出类HelloServer服务{
私有只读rootApi:string='1！'http://localhost:8080/api/';
构造函数（@Inject（HttpClient）私有只读http:HttpClient）{
}
公共getHelloWorld（名称：string）：可观察{
返回this.http.get（this.rootApi+name，{responseType:'text'，params:{}}）作为可观察的；
}
}

记住：此答案仅用于开发目的

首先，关键问题是较新的浏览器正在阻止跨源请求，这还涉及区分端口号：

因此

localhost:4200

与

localhost:8080

使用代理可能是解决此问题的最简单方法

Angular CLI能够轻松配置一个简单的代理，将所有定义的api调用委托给我们喜欢的目标

描述如何配置代理

简言之：

我们创建一个新文件proxy.conf.json

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false,
    "logLevel": "debug",
    "pathRewrite": {
      "^/api": ""
    }
  }
}

将其添加到angular.json中

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

并通过ng serve运行它：

预期产出：

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
[HPM] Proxy created: /api  ->  http://localhost:8080
[HPM] Proxy rewrite rule created: "^/api" ~> ""

---

记住：此答案仅用于开发目的

首先，关键问题是较新的浏览器正在阻止跨源请求，这还涉及区分端口号：

因此

localhost:4200

与

localhost:8080

使用代理可能是解决此问题的最简单方法

Angular CLI能够轻松配置一个简单的代理，将所有定义的api调用委托给我们喜欢的目标

描述如何配置代理

简言之：

我们创建一个新文件proxy.conf.json

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false,
    "logLevel": "debug",
    "pathRewrite": {
      "^/api": ""
    }
  }
}

将其添加到angular.json中

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

并通过ng serve运行它：

预期产出：

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
[HPM] Proxy created: /api  ->  http://localhost:8080
[HPM] Proxy rewrite rule created: "^/api" ~> ""

---

代理是一种很好的方法，但它只是一种临时的开发方法。在现实世界中，如果要将应用程序部署到真正的服务器中，则必须在后端为前端原点设置COR。那么你为什么不现在就设置它呢？是的，当然我可以在答案和问题中添加这些信息。嗨，澄清一下：如果我有多个端点（比如说

localhost:8080/用户

，那么

localhost:8080/评论

），我必须为每个端点添加一个条目吗？这就是它的工作原理吗？答案是Thx。我做了你做的，但仍然有一个错误。我用的是角度9。这里是Chrome的日志：

从源代码访问“localhost:7777/api/register”上的XMLHttpRequesthttp://localhost:4200'已被CORS策略阻止：跨源请求仅支持协议方案：http、data、chrome、chrome extension、https。

代理是一种很好的方法，但它只是用于开发的临时方法。在现实世界中，如果要将应用程序部署到真正的服务器中，则必须在后端为前端原点设置COR。那么你为什么不现在就设置它呢？是的，当然我可以在答案和问题中添加这些信息。嗨，澄清一下：如果我有多个端点（比如说

localhost:8080/用户

，那么

localhost:8080/评论

），我必须为每个端点添加一个条目吗？这就是它的工作原理吗？答案是Thx。我做了你做的，但仍然有一个错误。我用的是角度9。这里是Chrome的日志：

从源代码访问“localhost:7777/api/register”上的XMLHttpRequesthttp://localhost:4200'已被CORS策略阻止：跨源请求仅支持协议方案：http、数据、chrome、chrome扩展、，https.

Do

private readonly rootApi:string='10〕http://localhost:8080/api/“

（您需要请求URL中的“http://”协议部分）Do

private readonly rootApi:string=”http://localhost:8080/api/“

（请求URL中需要“http://”协议部分）