即使我从服务器获得响应，我在 Angular 5 应用程序中遇到 CORS 问题 [重复]答案

【问题标题】：I am getting CORS issue in Angular 5 app even though i get response from the server [duplicate]即使我从服务器获得响应，我在 Angular 5 应用程序中遇到 CORS 问题 [重复]
【发布时间】：2018-11-26 21:55:00
【问题描述】：

我在我的 ionic 应用程序中使用 Angular 5。我正在尝试从我的代码中调用端点

ngOnInit(): void {
    //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
    //Add 'implements OnInit' to the class.
    this.httpClient.get('https://abc-66b76.cloudfunctions.net/getBillNo', {
        headers: {
            'Access-Control-Allow-Origin': '*'
        }
    }).subscribe(data => {
        console.log('firebase bill No: ', data);
        this.bill.billNo = data.billNo;
    })
}

当我的页面加载时，上面的代码被调用并且在 chrome 浏览器控制台中我得到以下错误：

无法加载https://abc-66b76.cloudfunctions.net/getBillNo：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin 'http://localhost:8100' 因此不允许访问。

但是，如果我在我的 chrome 浏览器中检查我的网络选项卡，我可以看到它已经访问了服务器并得到了响应。

谁能帮我解决这个问题。

我的后端是 firebase 函数。

【问题讨论】：

您是否将headers: { 'Access-Control-Allow-Origin': '*'} 放在request 标头中？这不是 cors 的工作方式，服务器需要在其 response 中发送 Access-Control-Allow-Origin: *
顺便添加该标头会触发 CORS 预检序列 - 如果服务器不处理 CORS 预检，那么您在请求中放置虚假标头的事实可能是您的问题...步骤1，删除请求中的标头...然后查看是否仍然出现CORS错误，如果是，则服务器需要发送该标头
However if i check my network tab in my chrome browser i can see that it has hit the server and has got the response. - 是的，因为控制台可以看到的不仅仅是您的代码 - 它是一个有用的调试工具，而不是您的代码可以看到的镜像
cors 在浏览器和服务器中的 2 个地方客户端实现..so unitil you get ans disable cors check in browser
最初我尝试不使用任何标头.. 默认情况下，服务器设置为响应来自任何来源的请求..

标签： javascript angular firebase cors google-cloud-functions

【解决方案1】：

在您的 Angular 代码中没有什么可做的。要使其正常工作，您需要

在https://abc-66b76.cloudfunctions.net（端口 443）中托管您的 Angular 代码以及您的后端

或

您需要在后端的 Access-Control-Allow-Origin 标头（或 * 以允许所有来源）中允许您的 Angular 托管来源（在您的情况下为 http://localhost:8100）。现代浏览器会验证这一点并阻止请求，以防在出于安全考虑执行跨域请求时此标头不存在。

您设置此标头的方式取决于您的后端编程语言。如果你使用 NodeJS + express

var cors = require('cors')
var app = express()
app.use(cors())

如果后端不在您的控制之下，您也可以告诉您的浏览器忽略这样做。每个浏览器都有办法做到这一点。

对于 chrome，使用 --disable-web-security 命令行参数启动 chrome 浏览器（杀死所有正在运行的 chrome 实例）。

一个简单的 chrome 扩展可以用来做魔法（阅读它的说明）https://chrome.google.com/webstore/detail/cors-toggle/jioikioepegflmdnbocfhgmpmopmjkim?hl=en

如果您要向公众提供 Angular 应用程序，那么您应该考虑添加标头或为后端设置代理并通过代理发出请求，因为您不能强制每个用户禁用网络安全。

【讨论】：

【解决方案2】：

你可能需要做一个代理服务器，以避免在开发环境中从localhost调用api时出现CORS，所以nodejs是一种简单的方法，我真的推荐你这篇文章，它简单易懂，易于理解。

https://codeburst.io/using-nodejs-as-a-proxy-for-angularjs-ajax-requests-8e5e94203e0d

【讨论】：

【解决方案3】：

我发现最简单的方法是使用 node.js 包 cors。最简单的用法是：

var cors = require('cors')
var app = express()
app.use(cors())

当然，有很多方法可以根据您的需要配置行为；上面链接的页面显示了许多示例。

【讨论】：