这可能是因为CORS(跨源资源共享)设置不正确或存在问题。确保在远程MFE应用程序中正确设置了CORS。在Angular主应用程序中,可以通过添加代理配置来解决此问题。
以下是一个示例的解决方案:
proxy.conf.json
文件并添加以下内容:{
"/remote-mfe/*": {
"target": "http://localhost:[PORT_OF_REMOTE_MFE]",
"secure": false,
"changeOrigin": true,
"pathRewrite": {
"^/remote-mfe": ""
}
}
}
请注意,PORT_OF_REMOTE_MFE
应替换为远程MFE应用程序的端口号。pathRewrite
配置的目的是删除路径中的 "/remote-mfe" 部分。
HttpClient
之前,修改 proxy.conf.json
所述的启动命令以将 --proxy-config
标志设置为 proxy.conf.json
文件路径。ng serve --proxy-config proxy.conf.json
或
ng build --prod --output-hashing none --vendor-chunk=true --base-href=/ --deploy-url=/ --stats-json --extra-webpack-config webpack.extra.js --progress --proxy-config proxy.conf.json
HttpClient
来加载远程MFE应用程序。import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'Main App';
constructor(private http: HttpClient) {}
ngOnInit() {
this.http.get('/remote-mfe/predictions').subscribe(data => console.log(data));
}
}
/remote-mfe/predictions
是远程MFE应用程序的一个API端点,这应该替换为实际的端点路径。
希望这个解决方案解决了您的问题!