node.js - Angular 6 HttpClient - CORS 问题

Question

我的 Nodejs restful 服务有以下端点 http://localhost:3000/api/countries .我正在使用这个中间件 https://github.com/expressjs/cors .我因此启用了cors:-

const cors = require('cors');
app.use(cors({
  'allowedHeaders': ['sessionId', 'Content-Type'],
  'exposedHeaders': ['sessionId'],
  'origin': '*',
  'methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
  'preflightContinue': false
}));

我在 http://localhost:4200 上托管的 Angular 6 应用程序中有以下代码

   import { HttpClient, HttpHeaders } from '@angular/common/http';

   httpClient: HttpClient;

   getCountries(): Observable<any> {
     const url = 'http://localhost:3000/api/countries';
     const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin':'*'
      })
     };
     return this.httpClient.get(url, httpOptions).pipe(
        map((result: any) => {
            return result;
        })
     );
   }

我在 http://localhost:3001 的 React 应用程序中有以下代码

getCountries() {
    const url = 'http://localhost:3000/api/countries';
    const init = {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
   };

   try {
    const response = await fetch(url, init);
    const json = await response.json();
    return json
   };
 }

我的 react 代码完美地给出了所需的响应，但是 Angular 6 给出了以下错误:-

Access to XMLHttpRequest at 'http://localhost:3000/api/countries' from origin 'http://localhost:4200' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

我的 angular 6 代码哪里做错了？

请注意，我看到过类似问题的答案，建议使用 一个 json 文件 (proxy.conf.json) 充当代理服务器或安装 chrome 扩展。这些不是我的选择。

提前感谢您的有用回复。

Answer 1

您可以使用 this如果您想要一个快速的临时解决方案。

const url = 'https://cors-anywhere.herokuapp.com/http://localhost:3000/api/countries';