适用于应用引擎 URL 的 Firebase 托管 Access-Control-Allow-Origin

Question

我在 Firebase 托管上托管一个单页应用程序，我需要允许对应用程序引擎的跨域请求。应用托管在 project-id.firebaseapp.com，应用引擎服务托管在 project-id.appspot.com。我红色了 deployment documentation 并且没有示例如何为 URL.

添加 Access-Control-Allow-Origin header

这是我的 firebase.json 的样子：

{
  "database": {
    "rules": "database.rules.json"
  },
  "hosting": {
    "public": "public",
    "redirects": [
      {
        "source": "/server/:rest*",
        "destination": "https://app-id.appspot.com/:rest*",
        "type": 301
      }
    ],
    "rewrites": [
      {
        "source": "/views/**",
        "destination": "/views/**"
      },
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [ {
      "source" : "https://app-id.appspot.com/registration/generate",
      "headers" : [ {
        "key" : "Access-Control-Allow-Origin",
        "value" : "*"
      } ]
    } ]
  }
}

我尝试使用 gsutils 设置 CORS，但也没有帮助：

这是我的 cors.json

[
    {
        "maxAgeSeconds": 3600, 
        "method": ["GET", "POST"], 
        "origin": ["https://project-id.appspot.com/"]
    }
]

提前致谢

解决方案：

如果您只想在静态文件上允许 CORS，那么在 app.yaml 中设置 Access-Control-Allow-Origin header 就足够了。此 header 不允许出现在动态请求的 app.yaml 中，因此您必须以编程方式添加它。

如果您的请求很简单，则以下代码有效：

@Override
public void doPost(HttpServletRequest req, HttpServletResponse resp) 
    resp.addHeader("Access-Control-Allow-Origin", "*");
    resp.addHeader("Content-Type", "text/csv");
    resp.getWriter().append("Response");

}

但是，如果您的请求是 pre-flighted，则您必须覆盖 doOptions 方法并添加适当的 headers:

@Override
protected void doOptions(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    resp.addHeader("Access-Control-Allow-Origin", "*");
    resp.addHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS");
    resp.addHeader("Access-Control-Allow-Headers", "Content-Type");
}

@Override
public void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {
    resp.addHeader("Access-Control-Allow-Origin", "*");
    resp.addHeader("Content-Type", "text/csv");
    resp.getWriter().append("Response");
}

Here 是一个有用的图表，阐明了服务器上的 CORS 实现：

Answer 1

您的 firebase.json 不控制 appspot.com 文件，不能用于从您的应用引擎服务修改 headers。在这里，您已尝试在 https://app-id.appspot.com/registration/generate 上设置 Access-Control-Allow-Origin。这是行不通的，因为那不是 Firebase Hosting 托管的页面。

相反，您将 header 添加到 Firebase 页面的方法是将其放在 firebase.json 中，如下所示：

"headers": [ {
  "source" : "index.html",
  "headers" : [ {
    "key" : "Access-Control-Allow-Origin",
    "value" : "*"
  } ]
} ]

但这对解决 CORS 问题没有帮助，因为它需要到位 on the returned resource。

看来你可以根据this doc.

把它放到你的app.yaml下面handlers

handlers:
- url: /.*
  http_headers:
    Access-Control-Allow-Origin: http://mygame.appspot.com

此外，您可以通过编程方式添加它。正如 enable-cors.org 上所解释的，这里有一些脚本实现：

对于Google App Engine中的Python-based应用，可以使用self.response.headers.add_header()方法，例如：

class CORSEnabledHandler(webapp.RequestHandler):
  def get(self):
    self.response.headers.add_header("Access-Control-Allow-Origin", "*")
    self.response.headers['Content-Type'] = 'text/csv'
    self.response.out.write(self.dump_csv())

对于 Java-based 应用程序，使用 resp.addHeader():

public void doGet(HttpServletRequest req, HttpServletResponse resp) {
  resp.addHeader("Access-Control-Allow-Origin", "*");
  resp.addHeader("Content-Type", "text/csv");
  resp.getWriter().append(csvString);
}

对于 Go-based 个应用程序，使用 w.Header().Add():

func doGet(w http.ResponseWriter, r *http.Request) {
  w.Header().Add("Access-Control-Allow-Origin", "*")
  w.Header().Add("Content-Type", "text/csv")
  fmt.Fprintf(w, csvData)
}

适用于应用引擎 URL 的 Firebase 托管 Access-Control-Allow-Origin

Firebase hosting Access-Control-Allow-Origin for app engine URL

firebase

firebase-hosting