Question

我开发了一个带有快速后端的angular 7应用程序。 Express在traverse上运行，而Angle Client在localhost：4200上运行。

在slice中，我（不是整个代码）

Repa

在api.js文件中，我具有router.get（‘/ oauth2 / login’），该路由器重定向到https://example.com，后者发送访问令牌并验证用户身份（OAuth2验证）。

当我调用url http://localhost:3000/api/oauth2/login时，一切正常，但是当我尝试从angular component.ts-> service.ts中执行相同操作时，出现以下错误。

跨源请求被阻止：同源策略禁止阅读远程资源原因：CORS标头“ Access-Control-Allow-Origin” 失踪

login.component.ts的角度应用程序流程如下，该按钮具有调用服务api.service.ts的按钮，该按钮执行http get。

slice

api.service.ts

numpy

有人可以帮助我克服错误吗？我有a）CORS b）以

的形式从server.js提供静态文件

Eigen

c）动态环境变量。我还想念什么？

Answer 1

对于Angular 7，您必须执行其他实现。从角度文档中，您必须创建一个proxy.js文件：

https://angular.io/guide/build#using-corporate-proxy

编辑您自己的后端服务器的路径。

proxy.js：

var HttpsProxyAgent = require('https-proxy-agent');
var proxyConfig = [{
  context: '/api',
  target: 'http://your-remote-server.com:3000',
  secure: false
}];

function setupForCorporateProxy(proxyConfig) {
  var proxyServer = process.env.http_proxy || process.env.HTTP_PROXY;
  if (proxyServer) {
    var agent = new HttpsProxyAgent(proxyServer);
    console.log('Using corporate proxy server: ' + proxyServer);
    proxyConfig.forEach(function(entry) {
      entry.agent = agent;
    });
  }
  return proxyConfig;
}

module.exports = setupForCorporateProxy(proxyConfig);

稍后将其添加到package.json

"start": "ng serve --proxy-config proxy.js"

并通过以下方式致电：

npm start

然后在您的app.js中只需添加：

const cors = require("cors");
app.use(cors());

我遇到了同样的问题，这解决了我的问题。希望对您有所帮助！

Answer 2

我更改了回调机制以解决CORS问题，我正在利用OAuth流程让用户从https://example.com进行身份验证，该身份验证已重定向到https://example.com/auth/callback，我正在从{发起请求{3}}，然后将回调URL发送到服务器http://localhost:4200，我收到了CORS错误。

现在，我将其重定向到客户端http://localhost:3000，并且克服了CORS问题。 GET，POST，DELETE和PATCH的所有其他调用均来自http://localhost:4200，它工作正常。

谢谢大家的投入。

Answer 3

要将http://localhost:4200/api的所有呼叫转移到运行在http://localhost:3000/api的服务器上，请执行following步骤。

在project src /文件夹中package.json旁边创建文件proxy.conf.json。
将以下内容添加到新的代理文件中：

{ “ / api”：{ “ target”：“ http://localhost:3000”， “安全”：错误 } }
在CLI配置文件angular.json中，将proxyConfig选项添加到服务目标：

... “建筑师”：{ “服务”：{ “ builder”：“ @ angular-devkit / build-angular：dev-server”， “选项”：{ “ browserTarget”：“您的应用程序名称：内部版本”， “ proxyConfig”：“ src / proxy.conf.json” }， ...
要使用此代理配置运行开发服务器，请致电ng serve。

Answer 4

由于您的角度应用程序在4200端口上运行，后端在3000端口上运行，因此两个应用程序的来源是不同的。

要解决此问题，您可以在计算机中设置“ nginx”。

这将通过“ nginx”服务器处理来自angular和后端的所有请求。因此，解决了CORS问题。

Answer 5

如果这只是为了开发，我建议使用angular-cli随附的代理。创建一个名为proxy.json

的文件

和

{
  "/api/oauth2/login": {
    "target": "http://localhost:3000/api/oauth2/login",
    "secure": false
  }
}

和呼叫ng serve --proxy-config proxy.json。如果您认为这仍然是生产中的问题，那么我们必须进行更大的讨论。

完整文档： https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

另外，CORS到底是什么：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Answer 6

我一直在服务器端使用 Angular cli 和 .net Framework 。

要解决此问题，我只是使用以下步骤在服务器端进行CORS交互：

Install-Package Microsoft.AspNet.WebApi.Cors -Version 5.2.6

然后进入WebApiConfig类：
添加using System.Web.Http.Cors;
内部寄存器（HttpConfiguration配置）方法：

var cors = new EnableCorsAttribute("http://localhost:4200", "*", "*");

config.EnableCors(cors);

或

var cors = new EnableCorsAttribute("*", "*", "*"); //origin, headers, methods

config.EnableCors(cors);

Answer 7

我知道这已经得到回答，但是它可能会对正在搜索CORS问题的人有所帮助。您可以按照以下3个步骤解决此问题。 1.创建proxy.conf.json文件，并将其放在应用程序的根目录下。 2.在package.json文件中，在ngstart中添加proxy参数 3.在angular.json中，添加代理文件条目。 4.将所有其余调用更改为/ api / getData之类的内容。

此处提供了完整的分步教程。 http://www.codeyourthought.com/angular/proxy-to-make-http-call-in-angular/

Answer 8

默认情况下，Angular 设置了一些请求头参数，其中一个是“Content-Type”，其默认值为“application/json”。当我设置为“application/x-www-form-urlencoded”时，它为我解决了错误。

而不是使用 post 方法，例如：

this.http.post<any>(requestDetails['url'],requestDetails['data'])

首先使用 Angular 的 HttpHeaders 类设置请求头，例如：

let reqHeaders = new HttpHeaders({
   'Content-Type':'application/x-www-form-urlencoded'
});
this.http.post<any>(requestDetails['url'],requestDetails['data'],{headers:reqHeaders})

参考：https://angular.io/guide/http#adding-and-updating-headers

在我的例子中，'Access-Control-Allow-Origin' 也被设置为 * 服务器上的响应头，以接受来自任何来源的请求（在开发案例中主要是：localhost:4200）

Angular 7应用程序从Angular客户端获取CORS错误

8 个答案: