我正在使用 Angularfire 2 并从我的 ionic 4 应用程序调用云功能。如何解决 ionic 4 中的以下 CORS 问题？？
从源“http://localhost:8100”获取“https://null-myionicshop-693bc.cloudfunctions.net/subscribeToTopic”的访问权限已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin”标头出现在请求的资源上。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。
【问题讨论】：
标签： angular ionic-framework google-cloud-functions angularfire2 ionic4
我今天遇到了错误，我解决了。 我的项目是 ionic 4 和带有 typescript 的后端 express。
错误是请求的资源上不存在“Access-Control-Allow-Origin”标头。
我在 Express 中解决了。 我在请求的后端代码“标题”中附加了以下行。
this.app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
next();
});
还有这些行。
const whitelist = [
'http://localhost:8000',
'capacitor://localhost',
'ionic://localhost',
'http://localhost',
'http://localhost:8080',
'http://localhost:8100',
];
const corsOptions = {
origin: (origin: any, callback: any) => {
console.log(origin);
if (whitelist.indexOf(origin) !== -1) {
callback(null, true);
} else {
callback(new Error('Not allowed by CORS'));
}
},
preflightContinue: true,
credentials: true,
};
// Enable preflight requests for all routes
this.app.options('*', cors(corsOptions));
我认为您的问题与这些类似。 感谢您阅读我的建议。
【讨论】：
亲爱的，当我尝试在 ionic 4 中通过 Httpclient Angular 7 发布时，我遇到了同样的错误， 在我在 api url 之前添加以下链接后，它对我有用。 https://cors-anywhere.herokuapp.com/
例如： https://cors-anywhere.herokuapp.com/http://something.com/api/details.php
当在 localhost 上运行 api 时。关注下方，
1-以管理员身份运行“Cmd”
2-"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp
在 cmd 上运行它。新的 chrome 会话将自动启动。在此处运行 ionic 项目。
【讨论】：
我认为您必须检查 ~/.ionic/helper.log 中的离子日志 ，就我而言，我的错误是：
[ERROR] Error loading @ionic/angular-toolkit package.json: Error: Cannot find module '@ionic/angular-toolkit/package'
所以我安装了包“@ionic/angular-toolkit/package”，然后我配置了我的 angular.json：
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "app:build",
"proxyConfig": "proxy.conf.json"
},
然后完美运行 所以我的建议是……检查你的离子日志
【讨论】：
CORS 仅当我们在运行ionic serve 或ionic run -l 时运行或测试我们的应用程序时才会出现问题。
有两种方法可以解决该问题：第一种也是更简单的解决方案是只允许来自您的 API 端点的所有来源。
其次，您可以使用代理服务器来执行此操作。
假设我们要访问https://null-myionicshop-693bc.cloudfunctions.net/subscribeToTopic，这不允许我们来自本地主机。
代理设置包含两件事：您在本地 Ionic 服务器上用来访问它们的路径，以及您最终希望通过 API 调用访问的 proxyUrl。
将您的 ionic.project 文件设置为：
{
"name": "proxy-example",
"app_id": "",
"proxies": [
{
"path": "/subscribeToTopic",
"proxyUrl": "https://null-myionicshop-693bc.cloudfunctions.net/subscribeToTopic"
}
]
}
如上所述，当您访问路径 http://localhost:8100/api 的 ionic 服务器时，它将代表您将请求代理到 https://null-myionicshop-693bc.cloudfunctions.net/subscribeToTopic。
因此，不需要CORS。
我希望这会有所帮助！谢谢你
【讨论】：