如何在角度使用代理解决 CORS 问题答案

【问题标题】：How to resolve the CORS issue using proxy in angular如何在角度使用代理解决 CORS 问题
【发布时间】：2020-03-07 22:38:29
【问题描述】：

我正在使用 express Node 后端和前端进行 Angular。问题是当我将我的 API 集成到 Angular 时，我遇到了 CORS 问题。在开发人员控制台中，我遇到了这样的错误“XmlHttpRequet cannot load http://localhost:3000/student No Access-Control-Allow-Origin”

我尝试代理后端，在 Angular 项目中添加了 proxy-confg.json。但结果也一样。仍然有 CORS 问题。

// node js endpoint
ApienpointUrl = 'http://localhost:4200/stdApi/student';

// getting data from endpoint
getStudentfromMock() {
return this.http.get(this.ApienpointUrl).pipe(
  map((res: any) => res),
  catchError(this.handleError)
);
}

这里是 Angular 项目 proxy.conf.json 中的代理配置

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

我收到这样的错误：-

"XmlHttpRequet cannot load http://localhost:4200/stdApi/student No Access-Control-Allow-Origin. header is present on the request resources origin 'http://localhost:3000' therefor not allowed access".

【问题讨论】：

验证好 Api Endpoint url ，也许你有更多前缀（如 stdApi/v1 ），作为建议，验证你的 environement.ts 中的 apiEndpoint ：而不是 'localhost:3000' 应该是'localhost:3000/stdApi' ;)

标签： angular typescript angular7

【解决方案1】：

为了代理到后端服务器，在项目的src/ 文件夹中的proxy.conf.json 中添加代理配置后，在CLI 配置文件angular.json 中将proxyConfig 选项添加到serve 目标：

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

然后使用此代理配置运行开发服务器，调用ng serve。

或

使用代理配置运行ng serve：

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

【讨论】：

谢谢伙计。是的，你是对的。但我刚刚修改了 package.json 并使用 npm start 运行项目。这也很好用。 “脚本”：{“ng”：“ng”，“客户端”：“ng serve --proxy-config proxy.conf.json”}
是的。您也可以使用package.json 中的scripts 属性来完成此操作。 :)

【解决方案2】：

将此代码添加到 app.js 文件中。

app.use((req, res, next) => {
   // Website you wish to allow to connect
   res.setHeader('Access-Control-Allow-Origin', '*');

   // Request methods you wish to allow
   res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

  // Request headers you wish to allow
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With, content-type, token, language');

   // Set to true if you need the website to include cookies in the requests sent
   // to the API (e.g. in case you use sessions)
   res.setHeader('Access-Control-Allow-Credentials', true);

   // Pass to next layer of middleware
   next(); 
});

然后重启服务器。

【讨论】：

绕过 CORS 将是一个安全威胁。您可以在此处阅读更多信息：codecademy.com/articles/…。 Angular 始终建议使用代理服务器来避免开发中的 CORS 问题。
如何在 header 中传递 API Key？
res.setHeader('Access-Control-Allow-Origin', '*'); 浏览器自 2018 年起不再接受 * 作为有效来源

【解决方案3】：

我找到了解决此 CORS 的另一种方法。这是什么。

重写 URL 路径

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    }
  }
}

这对我也有用。

【讨论】：

这是我找到的答案。 link