Angular 7应用程序从Angular客户端获取CORS错误 [英] Angular 7 app getting CORS error from angular client
问题描述
我开发了一个带有快速后端的angular 7应用程序. Express在localhost:3000
上运行,而angular客户端在localhost:4200上运行.
I have developed an angular 7 app with express backend. Express running on localhost:3000
and angular client is running on localhost:4200.
在server.js
中,我有(不是整个代码)
In the server.js
I have (not the entire code)
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身份验证).
In the api.js file, I have router.get(‘/oauth2/login’) which redirects to https://example.com which sends an access token and authenticates the user (OAuth2 authentication).
当我调用网址 http://localhost:3000/api/oauth2/login 一切正常,但是当我尝试从angular component.ts-> service.ts做同样的事情时,出现以下错误.
When I am calling the url http://localhost:3000/api/oauth2/login everything is working fine, but when I am trying to do the same from angular component.ts -> service.ts I am getting the following error.
跨源请求被阻止:同源策略禁止阅读 远程资源原因:CORS标头"Access-Control-Allow-Origin" 失踪
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource Reason: CORS header ‘Access-Control-Allow-Origin’ missing
Angular应用程序流程如下login.component.ts,它具有一个调用服务api.service.ts的按钮,该按钮执行http get.
Angular app flow as follows login.component.ts which has a button calling a service api.service.ts which executes a http get.
login.component.ts
sfdcLogin(): void {
console.log('DEBUG: LoginComponent: ', 'Login button clicked..');
this.apiService.login().subscribe( data => { console.log( data ); });
}
api.service.ts
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)以
Can someone help me get past the error? I have a) CORS b) serving static files from server.js as
app.use(express.static(__dirname + '/dist/sfdc-event'));
c)动态环境变量. 我还想念什么?
c) dynamic environment variable. What else I am missing?
推荐答案
对于Angular 7,您必须执行其他实现.从角度文档中,您必须创建一个proxy.js文件:
For Angular 7 you must do other implementation. From angular documentation you must create a proxy.js file:
https://angular.io/guide/build#using-corporate-proxy
编辑您自己的后端服务器的路径.
Edit the path for your own backend server.
proxy.js:
var HttpsProxyAgent = require('https-proxy-agent');
var proxyConfig = [{
context: '/api',
target: 'http://your-remote-server.com:3000',
secure: false
}];
function setupForCorporateProxy(proxyConfig) {
var proxyServer = process.env.http_proxy || process.env.HTTP_PROXY;
if (proxyServer) {
var agent = new HttpsProxyAgent(proxyServer);
console.log('Using corporate proxy server: ' + proxyServer);
proxyConfig.forEach(function(entry) {
entry.agent = agent;
});
}
return proxyConfig;
}
module.exports = setupForCorporateProxy(proxyConfig);
稍后将其添加到您的package.json
Later add this to your package.json
"start": "ng serve --proxy-config proxy.js"
并通过以下方式调用它:
And call this with:
npm start
然后在您的app.js中只需添加:
And in your app.js just simply add:
const cors = require("cors");
app.use(cors());
我遇到了同样的问题,这解决了我的问题.希望对您有所帮助!
I had same problem and that solved my issue. I hope it helps!
这篇关于Angular 7应用程序从Angular客户端获取CORS错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!