时间戳

首页 > 解决方案 > 谷歌云节点应用无法连接跨域请求被阻止

node.js - 谷歌云节点应用无法连接跨域请求被阻止

问题描述

我刚刚将 node.js - vue.2.0 应用程序部署到 Google Cloud 。

vue.js 2.0 应用程序位于公共节点目录中。一切运行良好，除了我对 Web 服务的所有查询都失败了，在习惯性的 app.js 节点文件中，你知道.. 没有调用任何其他节点服务器，这就是为什么我什至尝试过 localhost:8080作为服务器名称。

https://cedar-network-259109.appspot.com

从应用程序完成的所有后端查询都失败：

POST
http://localhost:8080/getUsers

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/getUsers. (Reason: CORS request did not succeed).

我还管理应用程序调用谷歌云服务器 url：同样的错误。

POST http://cedar-network-259109.appspot.com:8080/getUsers

它也不起作用。

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/getUsers. (Reason: CORS request did not succeed).

问题： 我是否必须使用这个奇怪的命令在我的谷歌云应用程序上配置cors ？：

https://cloud.google.com/storage/docs/configuring-cors

非常感谢 ！

编辑：这是我在询问我的 cors 配置时得到的，看起来我没有任何 cors 配置？：

C:\UwAmp\www\vue-starter-webpack-cli-4-node-gcloud>gsutil cors get gs://cedar-network-259109.appspot.com
gs://cedar-network-259109.appspot.com/ has no CORS configuration.

编辑 2：

我正在向我的谷歌云应用程序发送一个 CORS 参数，如下所示：

>gsutil cors set cors-json-file.json gs://cedar-network-259109.appspot.com

这是我的 cors-json-file.json 文件：

  [
    {
      "origin": ["https://cedar-network-259109.appspot.com"],
      "responseHeader": ["Content-Type"],
      "method": ["GET", "POST","HEAD", "DELETE"],
      "maxAgeSeconds": 3600
    },
    {
      "origin": ["https://cedar-network-259109.appspot.com:8080"],
      "responseHeader": ["Content-Type"],
      "method": ["GET", "POST","HEAD", "DELETE"],
      "maxAgeSeconds": 3600
    }
]

仍然有一个错误：

POST https://cedar-network-259109.appspot.com:8080/getUsers
    Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cedar-network-259109.appspot.com:8080/getUsers. (Reason: CORS request did not succeed).

有我的资料：

>gsutil cors get  gs://cedar-network-259109.appspot.com
[{"maxAgeSeconds": 3600, "method": ["GET", "POST", "HEAD", "DELETE"], "origin": ["https://cedar-network-259109.appspot.com:8080"], "responseHeader": ["Content-Type"]}]

还有我的请求 URL：https://cedar-network-259109.appspot.com:8080/getUsers headers ：

Host: cedar-network-259109.appspot.com:8080
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0
Accept: application/json, text/plain, */*
Accept-Language: fr,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate, br
Referer: https://cedar-network-259109.appspot.com/
Origin: https://cedar-network-259109.appspot.com
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Content-Length: 0

我的 app.yaml 文件：

runtime: nodejs
env: flex

manual_scaling:
  instances: 1
resources:
  cpu: 1
  memory_gb: 0.5
  disk_size_gb: 10

编辑 3：使用以下代码修改了我的节点 app.js 后端：

const cors = require("cors");
app.use(
  require("cors")({
    origin: function(origin, callback) {
      callback(null, origin);
    },
    credentials: true
  })
);

对此：

app.use(
  require("cors")({
    origin: "https://cedar-network-259109.appspot.com",
    credentials: true
  })
);

没有运气！请帮帮我！

标签： node.jsgoogle-cloud-platformvuejs2cors

解决方案

如果您尝试访问的资源存储在 Google Cloud Storage 上，那么您需要按照您提到的文档中的说明启用 CORS 。如果您尝试访问由另一个 Google App Engine 应用托管的文件的资源，您需要按照文档中的说明修改您的 app.yaml文件。

推荐阅读