Angular 7 app从角度客户端获取CORS错误

Question

我开发了一个带有快速后端的角度7应用程序。在localhost:3000和angular客户端上运行的Express正在localhost：4200上运行。

在server.js我有（不是整个代码）

const app = express();
// Enable CORS
app.use(cors());
// Get our API routes
const api = require('./api');
// Set our api routes
app.use('/api', api);
app.use(express.static(__dirname + '/dist/sfdc-event'));

在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”丢失

Angular app流程如下login.component.ts，其中有一个按钮，调用服务api.service.ts执行http get。

login.component.ts

sfdcLogin(): void {
  console.log('DEBUG: LoginComponent: ', 'Login button clicked..');
 this.apiService.login().subscribe( data => { console.log( data ); });
}

api.service.ts

login() {
  console.log('DEBUG: APiService login(): ', 'login() function.');
  const URL = 'oauth2/login';
  console.log('DEBUG: ApiService login URL : ', `${environment.baseUrl}/${URL}`.toString());
  return this.http.get(`${environment.baseUrl}/${URL}`)
    .pipe( map( res => res ));
}

有人可以帮我解决错误吗？我有a）CORS b）从server.js提供静态文件

app.use(express.static(__dirname + '/dist/sfdc-event'));

c）动态环境变量。我还缺少什么？

Answer 1

对于Angular 7，您必须执行其他实现。从angular文档中，您必须创建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重定向到http://localhost:4200，我从http://localhost:3000发起请求，然后将回调网址发送到服务器http://localhost:4200和我收到了CORS错误。

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

谢谢大家的投入。

Answer 3

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

1. 在package.json旁边的项目src /文件夹中创建一个文件proxy.conf.json。
2. 将以下内容添加到新代理文件： {“/ api”：{“target”：“Install-Package Microsoft.AspNet.WebApi.Cors -Version 5.2.6”，“secure”：false}}
3. 在CLI配置文件angular.json中，将proxyConfig选项添加到服务目标： ...“architect”：{“serve”：{“builder”：“@ angular-devkit / build-angular：dev-server”，“options”：{“browserTarget”：“your-application-name：build” ，“proxyConfig”：“src / proxy.conf.json”}，...
4. 要使用此代理配置运行dev服务器，请调用ng serve。

Answer 4

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

为了解决这个问题，我只需使用以下步骤在服务器端启用CORS交互：

1. using System.Web.Http.Cors; 然后，进入WebApiConfig类：
2. 添加

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

3. Inside Register（HttpConfiguration config）方法：

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

config.EnableCors(cors);

要么

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

Answer 5

因为，你的角应用程序运行在4200端口和3000端口上运行的后端，两个应用程序的起源是不同的。

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

这将通过“nginx”服务器进行角度和后端的所有请求。因此，解决了CORS的问题。

Answer 6

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

和

ng serve --proxy-config proxy.json

和电话https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md。如果您认为这仍然是生产中的问题，那么我们必须进行更大的对话。

完整文档：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

什么是CORS exacly：http://www.codeyourthought.com/angular/proxy-to-make-http-call-in-angular/

Answer 7

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

这里给出了完整的分步教程。 qazxswpoi