如何在Google App Engine上修复CORS Node.js [英] How to fix CORS Node.js on Google App Engine

问题描述

我在Google App Engine上部署了2个应用程序；

I have 2 applications deployed on Google App Engine;

A是Angular 8应用程序.

A is a Angular 8 application.

B是Node.js Express应用程序.

B is a Node.js express application.

每当我尝试在后端调用API时，都会收到此错误:

Whenever I try to call an API in my backend I receive this error:

Access to XMLHttpRequest at '"APPLICATION B"/getGroups?userKey=' from origin 'APPLICATION A' 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.

我确保在APPLICATION B的google app引擎凭据中启用APPLICATION A URL作为授权Javascript起源和授权重定向URI.在本地主机中，一切正常.

I made sure to enable APPLICATION A url in google app engine credentials of APPLICATION B as an Authorized Javascript Origin and Authorized Redirect URI. In localhost everything works.

我在App.js上尝试过的操作:

What I tried on App.js:

尝试1

app.use(function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, x-client-key, x-client-token, x-client-secret, Authorization");
next();
});

ATTEMPT 2

ATTEMPT 2

var cors = require('cors')
app.use(cors())

挑战3

var cors = require('cors')

var corsOptions = {
  origin: 'APPLICATION A',
}

app.use(cors(corsOptions ));
app.options('*', cors());

这是我在angular 8应用程序A中所做的GET

This is the GET I do in my angular 8 application A

  getGroupsRequest(id): Observable<any> {
    const url = "APPLICATION B"
    return this.http.get(url + id);
  }

如果我使用CORS插件或打开Goog​​le Chrome浏览器"--disable-web-security"，则可以使用.

If I use a CORS plugin or open google chrome "--disable-web-security" it works.

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-data-dir="C:\Users\510919\ChromeDev" --disable-web-security --auto-open-devtools-for-tabs

推荐答案

在Node.js文件中的app.js中尝试

Try this in your app.js in your Node.js file

var express = require('express')
  ,cors = require('cors')
  , app = express();

var originsWhitelist = [
  '<FRONT-END URL>',     
   'http://www.myproductionurl.com'
];
var corsOptions = {
  origin: function(origin, callback){
        var isWhitelisted = originsWhitelist.indexOf(origin) !== -1;
        callback(null, isWhitelisted);
  },
  credentials:true
}

app.use(cors(corsOptions));

这将在您的Node.js上启用

This will enable on your Node.js

现在，您需要准备Angular应用程序以支持CORS

Now you will need to prepare your Angular app to support CORS

要启用CORS，您可以扩展 BrowserXhr 并将其包含在引导过程中.在Angular应用程序项目中创建一个名为 cust-ext-browser-xhr.ts 的文件，然后粘贴以下代码:

To enable CORS you can extend the BrowserXhr and include that in the bootstrapping process. Create a file in your Angular application project named cust-ext-browser-xhr.ts and paste the following code:

import {Injectable} from "@angular/core";
import {BrowserXhr} from "@angular/http";
@Injectable()

export class CustExtBrowserXhr extends BrowserXhr {
  constructor() {
      super();
  }
  build(): any {
    let xhr = super.build();
    xhr.withCredentials = true; 
    return <any>(xhr);
  }
}

并且要使用您的自定义BrowserXhr ，您将需要执行以下操作.

And in order to use your Custom BrowserXhr you will need to do something like this.

import { provide } from '@angular/core';
import { AppComponent} from './app/';
import { BrowserXhr } from '@angular/http';
import {CustExtBrowserXhr} from './app/path-to-file/cust-ext-browser-xhr';
@NgModule({
  imports: [
    HttpModule,
    BrowserModule,
    …
  ],
  declarations: [AppComponent],
  providers: [
    {provide: BrowserXhr, useClass:CustExtBrowserXhr},
    {provide: LocationStrategy, useClass: HashLocationStrategy}
    …
  ],
  bootstrap: [ AppComponent ]
})

希望它对您有帮助.

这篇关于如何在Google App Engine上修复CORS Node.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！