Angular CORS请求被阻止

Question

我正在尝试将我的Angular应用程序与Express上的简单REST服务器连接起来。服务器仅发送json数据以回复请求。为了添加CORS支持，我使用了来自npm的cors模块。在Angular应用程序中，我按照此问题的说明添加了HttpHeaders：Angular CORS request blocked。

这是我在快递中的代码，我设置了cors选项：`

// async CORS setup delegation
function corsOptsDelegator(req, cb) {
    let opts = {},
        origin = req.header('Origin');
    if(imports.allowedOrigins.indexOf(origin) === 1) opts.origin = true;
    else opts.origin = false;
    opts.optionsSuccessStatus = 200;
    opts.methods = ['POST', 'GET']; // allowed methods
    opts.credentials = true; // for passing/setting cookie 
    opts.allowedHeaders = ['Content-Type', 'Accept', 'Access-Control-Allow-Origin']; // restrict headers 
    opts.exposedHeaders = ['Accept', 'Content-Type']; // for exposing custom headers to clients; use for hash
    cb(null, opts);
}
`

以下是我将其添加到全局get处理程序的方法：

`
app.get('/', cors(corsOptsDelegator), (res, req, nxt) => {
    // only for adding cors on all requests
    nxt();
});
`

以下是我设置Angular服务的方法：

`

export class ContentGetterService {

  private root: string;
  private corsHeaders: HttpHeaders;
  //private contents: string;

  constructor(private http: HttpClient) {
    this.root = 'http://localhost:8888';
    this.corsHeaders = new HttpHeaders({
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'Access-Control-Allow-Origin': 'http://localhost:4200'
    });
    //this.contents = '';
   }

  getContent(subs: Array<string>): Observable<IContent> {
    return (() => {
      return this.http.get<IContent>( (() => {
        let r = this.root;
        subs.forEach((s, i, a) => {
          if(i === a.length-1) {
            r += s;
          }
          else {
            if(s !== '/') {
              r += s;
            }
          }
        });
        return r;
      })(), {
        headers: this.corsHeaders
      });

    })();
  }
  }

浏览器警告：Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8888/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

谢谢。

Answer 1

如果您使用angular-cli，则可以使用代理：

{
  "/api": {
    "target": "http://localhost:8888",
    "secure": false
  }
}

将/api前缀的所有请求重定向到localhost：8888，没有任何cors问题。

官方文档：qazxsw poi

Answer 2

首先，客户端的问题是由于Firefox选择处理飞行前CORS的行为。使用https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md方法而不是使用GET方法。从我的代码中可以看出，我没有任何处理OPTIONS的处理程序。经过一些谷歌搜索，我在github上发现了这篇文章：OPTIONS。使用它并对我的客户端请求标题进行以下修改，我能够正确地启动并运行它。这是代码：

课程支持者：

Express CORS middleware

将其挂载到app实例：

function myCors(req, res, nxt) {
    res.header('Access-Control-Allow-Origin', 'http://localhost:4200');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Access-Control-Allow-Origin, Content-Type, Accept, Accept-Language, Origin, User-Agent');
    if(req.method === 'OPTIONS') {
        res.sendStatus(204);
    }
    else {
        nxt();
    }
}`

在Angular客户端服务：

app.use(myCors);

感谢大家的时间和精力。

Answer 3

允许服务器端从角度JS中命中，在这种情况下，您需要允许

this.corsHeaders = new HttpHeaders({
  'Content-Type': 'application/json',
  'Accept': 'application/json',
  'Access-Control-Allow-Origin': 'http://localhost:8888/'
});
// ... adding it to the request
getContent(subs: Array<string>): Observable<IContent> {
return (() => {
  return this.http.get<IContent>( (() => {
    let r = this.root;
    subs.forEach((s, i, a) => {
      if(i === a.length-1) {
        r += s;
      }
      else {
        if(s !== '/') {
          r += s;
        }
      }
    });
    return r;
  })(), {
    headers: this.corsHeaders
  });

})();
}

，因为这是您的服务器端URL，角度在http://localhost:8888/上运行。请查看Http。然后它工作

Answer 4

使用此代码并根据您的结构管理您的自我。

http://localhost:4200

app.use(cors({ origin: http://localhost:4200, methods: 'GET,HEAD,PUT,PATCH,POST,DELETE', allowedHeaders: ['Content-Type', 'Authorization', 'Origin', 'x-access-token', 'XSRF-TOKEN'], preflightContinue: false }));

在角度方面

app.get('/', (res, req, nxt) => {
    // only for adding cors on all requests
    nxt();
});

并使用

constructor(private http: HttpClient) {
    this.root = 'http://localhost:8888';  //remove
    this.corsHeaders = new HttpHeaders({
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'Access-Control-Allow-Origin': '/' .  // edit 
    });
    //this.contents = '';
   }

index.html

Answer 5

在开发环境（localhost）中，你可以轻松地完成它，而无需遵循任何这些艰难的步骤。你可以简单地下载<base>，如果你使用的是Firefox，我认为必须有一个chrome的扩展名。下载后它将来到firefox menubar然后你可以点击它来激活它，这就是你现在可以访问所有apis，因为它会自动发送所有请求的标题。对于生产环境，你必须通过添加access-control-allow-origin来从服务器配置它*（全部）