我已经开发了一个带有Express后端的Angular 7应用程序。 Express运行在localhost:3000
上,而Angular客户端则在localhost:4200上运行。
在server.js
中,我有以下代码(不是完整的代码):
const app = express();
// Enable CORS
app.use(cors());
// Get our API routes
const api = require('./api');
// Set our api routes
app.use('/api', api);
app.use(express.static(__dirname + '/dist/sfdc-event'));
在api.js文件中,我有router.get('/oauth2/login'),它重定向到https://example.com,该网站会发送访问令牌并对用户进行身份验证(OAuth2认证)。
当我调用urlhttp://localhost:3000/api/oauth2/login时,一切都正常工作,但是当我尝试从Angular组件.ts -> service.ts执行相同操作时,我遇到了以下错误。
Angular应用程序的流程如下:login.component.ts具有调用api.service.ts的按钮,该服务执行http get。跨域请求被阻止:同源策略禁止读取远程资源原因:缺少CORS头“Access-Control-Allow-Origin”
login.component.ts
sfdcLogin(): void {
console.log('DEBUG: LoginComponent: ', 'Login button clicked..');
this.apiService.login().subscribe( data => { console.log( data ); });
}
api.service.ts
login() {
console.log('DEBUG: APiService login(): ', 'login() function.');
const URL = 'oauth2/login';
console.log('DEBUG: ApiService login URL : ', `${environment.baseUrl}/${URL}`.toString());
return this.http.get(`${environment.baseUrl}/${URL}`)
.pipe( map( res => res ));
}
有人能帮我解决这个错误吗?我遇到了a) CORS b) 在server.js中作为静态文件进行服务。
app.use(express.static(__dirname + '/dist/sfdc-event'));
c) 动态环境变量。 还有什么我遗漏了吗?