Angular 角度CORS请求被阻止

我正在尝试将我的Angular应用程序与express上的简单REST服务器连接。服务器仅发送

json

数据以响应请求。为了添加

CORS

支持，我使用了npm中的

CORS

模块。在Angular应用程序中，我按照此问题的说明添加了

HttpHeaders

：

以下是我在express中设置cors选项的代码： `

下面是我如何将其添加到全局

get

处理程序中的：

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

下面是我如何设置角度服务的：

`

导出类ContentGetterService{
私有根：字符串；
私有corsHeaders:HttpHeaders；
//私有内容：字符串；
构造函数（专用http:HttpClient）{
这是根http://localhost:8888';
this.corsHeaders=新的HttpHeaders({
“内容类型”：“应用程序/json”，
“接受”：“应用程序/json”，
“访问控制允许来源”：http://localhost:4200'
});
//本节内容=“”；
}
getContent（subs:Array）：可观察{
返回（（）=>{
返回此.http.get（（（）=>{
设r=this.root；
subs.forEach（（s，i，a）=>{
如果（i==a.length-1）{
r+=s；
}
否则{
如果（s！=='/'））{
r+=s；
}
}
});
返回r；
})(), {
标题：这是corsHeaders
});
})();
}
}

浏览器警告：

跨源请求被阻止：同一源策略不允许读取远程资源http://localhost:8888/. （原因：缺少CORS标题“访问控制允许原点”。

---

谢谢。

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

proxy.conf.json：

将所有带有

/api

前缀的请求重定向到localhost:8888，而不存在任何cors问题

---

官方文档：

允许您从angular JS点击的服务器端，在这种情况下，您需要允许

http://localhost:8888/

因为这是您的服务器端URL，所以请运行

http://localhost:4200

。请检查Http。然后它就可以工作了。使用此代码并根据您的结构管理您自己

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

首先，客户端的问题是由于Firefox选择处理飞行前CORS的行为。没有使用

GET

方法，而是使用了

OPTIONS

方法。从我的代码中可以明显看出，我没有任何处理

选项的处理程序。在谷歌搜索之后，我在github上发现了这篇帖子：。通过使用它并对客户端请求头进行以下修改，我能够正确地启动并运行它。代码如下：

CORS中间件：

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();
    }
}`

将其装载到应用程序实例：
app.use（myCors）

在客户端服务上：

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
  });

})();
}

this.corsHeaders=新的HttpHeaders({
“内容类型”：“应用程序/json”，
“接受”：“应用程序/json”，
“访问控制允许来源”：http://localhost:8888/'
});
// ... 将其添加到请求中
getContent（subs:Array）：可观察{
返回（（）=>{
返回此.http.get（（（）=>{
设r=this.root；
subs.forEach（（s，i，a）=>{
如果（i==a.length-1）{
r+=s；
}
否则{
如果（s！=='/'））{
r+=s；
}
}
});
返回r；
})(), {
标题：这是corsHeaders
});
})();
}

感谢大家的时间和努力。
在开发环境（localhost）中，您可以轻松完成，无需遵循任何这些困难步骤。如果您使用的是firefox，您只需下载，我认为chrome也必须有一个扩展。下载后，它将进入firefox菜单栏，然后您可以单击它来激活它，这就是您现在可以访问所有API的全部内容，因为它会自动发送包含所有请求的标头。对于生产环境，您必须通过将访问控制允许源站添加到*（全部）
来从服务器配置它：
this.corsHeaders=new HttpHeaders({'Content Type'：'application/json'，'Accept'：'application/json'，'Access Control Allow Origin'：'http://localhost:8888'     })
尝试此操作时不幸出现了相同的错误。如果您使用
安全：false
，则无需使用cors中间件进行检查，然后也删除该代码。这意味着从您的客户端删除cors功能。我认为这不是一个好主意。我同意关闭cors是一个坏主意。是的，因为我们始终允许从客户端删除服务器端侧。不是客户端。请查看此URL以更好地理解这是一个有效的解决方案，但是，我坚持使用cors。感谢您的努力。尽管我使用的代理方式与您上面提到的方式相同，但我仍然会遇到此问题。对我来说是有效的。但是对于Angular版本>6，有一个更新的文档。请注意，这仅适用于devel选择环境，不在生产环境中。我根据您的建议进行了修改。仍然是相同的错误。而且，我不确定您所说的
index.html是什么意思。请将
href
更改为什么？是的，Chrome也有类似之处：
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 = '';
 }

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();
    }
}`

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
  });

})();
}