CORS 问题 - Angular 8 - NodeJS 和 ExpressJS

Question

我尝试了一些与其他线程不同的解决方案，并怀疑我在这里遗漏了一些小东西。

我有一个 AngularJS 8 应用程序，使用 ExpressJS 在 Node 10 上运行。尝试访问 Google 的 People API 时遇到一些 CORS 问题。

Access to XMLHttpRequest at 'https://developers.google.com/people/api/rest/v1/people.connections' from origin 'http://app.x.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource

我的前端代码如下：

    return this.httpClient.get(this.API_URL, {
      headers: new HttpHeaders({
        Authorization: `Bearer ${authtoken}`,
        'Access-Control-Allow-Origin': 'http://localhost:4200',
        'Access-Control-Allow-Credentials': 'true',
      })
    });
  }

我的服务器端代码：

let express = require('express'),
  path = require('path'),
  cors = require('cors');
// Connecting mongoDB
var compression = require('compression')
var session = require("express-session");

let app = express();
app.use(session({
  secret: '#######################',
  resave: false,
  saveUninitialized: true,
  cookie: { secure: true }
}));
app.use(compression())
app.use(cors());

app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});


/*var corsOptions = {
  origin: '*',
  optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
}
app.use(cors(corsOptions));
*/

app.use(express.static(path.join(__dirname, 'dist/###')));
app.use('/*', express.static(path.join(__dirname, 'dist/##')));
// Create port
const port = 8080;
const server = app.listen(port, () => {
  console.log('Connected to port ' + port)
})

// Find 404 and hand over to error handler
app.use((req, res, next) => {

  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8888');

  // 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-Requested-With,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);

  // Pass to next layer of middleware
  next();
});


app.use(function (err, req, res, next) {
  console.error(err.message);
  if (!err.statusCode) err.statusCode = 500;
  {
    res.status(err.statusCode).send(err.message);
  }


  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200');

  // 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-Requested-With,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);

  // Pass to next layer of middleware
  if (!err.statusCode) err.statusCode = 500;
  {
    res.status(err.statusCode).send(err.message);
  }


  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8888');

  // 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-Requested-With,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);

  // Pass to next layer of middleware
  next();
});

如您所见，我尝试了几种不同的方法。希望有任何建议。

谢谢

Answer 1

以另一种方式解决了该问题。使用 Gapi 库（javascript：https://github.com/google/google-api-javascript-client/blob/master/docs/reference.md）及其身份验证，我能够登录、获取 JWT 并将其用作凭据。

    const googleUser = await googleAuth.signIn();

    const token = googleUser.getAuthResponse().id_token;

    const credential = firebase.auth.GoogleAuthProvider.credential(token);
    await firebase.auth().signInAndRetrieveDataWithCredential(credential);

    return googleUser;

使用该凭据登录到 Firebase。一直以来，由于 Gapi 的 Javascript 库，登录到 Google Api。当然，您可以使用 gapi 实例来请求资源和 api，具体取决于您的范围。

 const contacts = await gapi.client.request({
        'path': 'https://people.googleapis.com/v1/people/me/connections?personFields=email_addresses,names&pageToken=CAAQwo2YuIUuGgYKAghkEAI&pageSize=2000',

      })

没有 CORS 问题，没有大惊小怪。只是发布它可以帮助其他人节省一些时间。