Question

我在我的离子应用程序中使用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”标头。因此，不允许原点“http://localhost:8100”访问。

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

任何人都可以帮我解决这个问题。

我的后端是firebase功能。

Answer 1

您需要在服务器端设置响应标头。

如果您使用快速节点，则可以通过以下代码设置响应标头。

app.use(function (req, res, next) {

    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', '*');

    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'x-access-token,content-type');

    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);

    if (req.method == 'OPTIONS') {
        res.status(200).json();
    } else {
        next()
    }
});

希望这个答案对你有所帮助。

Answer 2

你的Angular代码中没有任何关系。为了使它工作，你需要

将您的角色代码与后端

https://abc-66b76.cloudfunctions.net

或

您需要在后端的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应用程序，那么您应该考虑添加标头或为后端设置代理并通过代理发出请求，因为您无法强制每个用户禁用Web安全性。

Answer 3

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

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

Answer 4

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

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

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

即使我收到服务器的响应，我也会在Angular 5 app中收到CORS问题

4 个答案: