Angular 6 中没有“Access-Control-Allow-Origin”标头

Posted 2023-02-27

【中文标题】Angular 6 中没有“Access-Control-Allow-Origin”标头

【英文标题】：No 'Access-Control-Allow-Origin' header in Angular 6

【发布时间】：2019-04-10 04:36:14

【问题描述】：

我收到 Access-Control-Allow-Origin 错误。

从源“https://localhost:44322”访问“https://localhost:44301/api/XXXX/GetAllXXXX”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin”标头出现在请求的资源上。

下面是我传递给 api 调用的标题。

getAllItems<T>(): Observable<T> 
const options =  headers: this.getRequestHeaders() ;
return this.http.get<T>(this.getAllItemUrl, options);

protected getRequestHeaders(): HttpHeaders 
let headers = new HttpHeaders(
  'Content-Type': 'application/json',
  'Accept': `application/json, text/plain, */*`,
  'App-Version': '1',
);
return headers;

我是否缺少任何东西来连接我的 API？

【问题讨论】：

您需要确保您的后端发送Access-Control-Allow-Origin 标头。如果你搜索 CORS，应该有很多关于这个的在线资源

在这里查看我的答案，***.com/questions/53167985/… 这是比使用 CORS 更好的选择

【参考方案1】：

您需要将 CORS 添加到后端服务。如果它是基于快递的服务，你可以有这样的东西

const express = require('express');
const app = express();


var allowCrossDomain = function(req, res, next) 
    res.header('Access-Control-Allow-Origin', "*");
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();


app.use(allowCrossDomain);

【讨论】：

它被标记为 .Net API。并注意使用“*”，仅在开发时使用。