javascript - 我在 Angular 5 应用程序中遇到 CORS 问题,即使我从服务器得到响应

标签 javascript angular firebase cors google-cloud-functions

<分区>

我在我的 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 浏览器控制台中我得到以下错误:

Failed to load https://abc-66b76.cloudfunctions.net/getBillNo: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

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

enter image description here

谁能帮我解决这个问题。

My Backend is firebase functions.

最佳答案

您的 Angular 代码无事可做。要使其正常工作,您需要

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

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

设置此 header 的方式取决于您的后端编程语言。 如果你使用 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 应用程序,那么您应该考虑添加 header 或为后端设置代理并通过代理发出请求,因为您不能强制每个用户禁用网络安全。

关于javascript - 我在 Angular 5 应用程序中遇到 CORS 问题,即使我从服务器得到响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50902920/

相关文章:

javascript - 使用 Javascript、PHP 和 AJAX 输出 SQL 查询

javascript - 如何连接两个 JavaScript 变量和正则表达式

javascript - 读取并返回 Firebase 数据库条目,该条目也可用于更新

javascript - 如何等待Firebase存储图像上传,然后运行下一个函数

firebase - 一个域用于两个独立的 Firebase 项目

javascript - 如何在 Django 中处理 AJAX POST 请求

javascript - Gulp 和 Browserify,使用 Node.js require(); 进行依赖管理。把 jQuery 放在上面?

angular - 从 Angular 组件关闭 Electron 应用程序

angular - 无法绑定(bind)到 'typeahead',因为它不是 'input' 的已知属性

angular - Angular 9 有什么新功能?