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

Question

我开发了一个带有 express 后端的 angular 7 应用程序。 Express 在 localhost:3000 上运行，并且 Angular 客户端在 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 应用程序流程如下 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) 动态环境变量。我还缺少什么？

原文由 Arup Sarkar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

默认情况下，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）

原文由 Mayank Ahuja 发布，翻译遵循 CC BY-SA 4.0 许可协议