时间戳

首页 > 解决方案 > 从 Firebase 托管应用程序对 Cloudrun 服务进行 Axios 调用时出现 CORS 错误

firebase - 从 Firebase 托管应用程序对 Cloudrun 服务进行 Axios 调用时出现 CORS 错误

问题描述

这看起来很明显，但是我已经尝试了几天，但仍然无法使其正常工作。拜托，有人可以指出我错过了什么。

我正在尝试从我的 firebase 托管 SPA 对我的云运行服务进行 axios 调用。为了隔离问题，我按照 [firebase 云运行教程] ( https://firebase.google.com/docs/hosting/cloud-run#node.js )中概述的步骤进行操作

本教程的第 4 步讨论了设置重写以使用 firebase 域作为云运行服务的代理。它说helloworld服务可以通过

您的 Firebase 子域： projectID .web.app/helloworld 和projectID .firebaseapp.com/helloworld

所以我按照步骤部署服务。然后我尝试从 SPA 对服务进行 axios 调用，如下所示

testHelloWorld () {
  axios.get(`https://myProjectId.firebaseapp.com/helloworld`)
     .then((data) => {
       console.log(data)
     })
     .catch(ex => {
        console.error(ex)
     })
  })
}

但后来我得到了CORS错误

从源“ https://myFirabaseApp.firebaseapp.com ”访问“ https://myProjectId.firebaseapp.com/helloworld ”中的 XMLHttpRequest已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：否请求的资源上存在“Access-Control-Allow-Origin”标头。

这个答案表明这应该是可能的，所以我不确定我做错了什么。

注意：

在调试时，我更新了教程中的节点应用程序以添加如下所示的 cors 支持。仍然没有工作。

const express = require('express');
const app = express();
const cors = require('cors'); //Imported and added this

app.use(cors()); // Used here

app.get('/', (req, res) => {
  console.log('Hello world received a request.');

  const target = process.env.TARGET || 'World';
  res.send(`Hello ${target}!`);
});

const port = process.env.PORT || 8080;
app.listen(port, () => {
  console.log('Hello world listening on port', port);
});

所以这里的问题是，如何使用 firebase 重写规则对我的云运行服务进行 Axios/AJAX 调用？

标签： firebasecorsgoogle-cloud-run

解决方案

请检查您是否安装了 cors：npm install cors。

请检查以下 2 个选项是否可以解决您的问题：

1 = 使用以下代码：

 app.use(cors({origin:true,credentials: true}));

2）如果前面的不起作用，请使用以下代码：


app.get('/', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  console.log('Hello world received a request.');
}

请让我知道它是否适合您。

推荐阅读