我正在使用 ionic 进行测试,其中我向服务发出 http 请求。
这个服务没有实现 CORS,所以我必须创建一个代理来避免这种情况(这是我被告知的,我想是的)。
我的app很简单,就是想发出之前说的http请求。
为了制作我的应用程序,我已经完成了本网站上的指示:https ://reviblog.net/2017/06/19/tutorial-de-ionic-comunicaciones-http-api-rest/
在此示例中,向实施了 CORS 的网站发出请求,该请求不会导致问题,但在我的服务器上发出请求时,会出现以下错误:
“在 Access-Control-Allow-Origin 标头中找不到来源http://localhost:8100 ”
为了解决这个问题,我尝试了以下链接:https ://stackoverflow.com/questions/37172928/angular-cli-server-how-to-proxy-api-requests-to-another-server/39715785
根据这个答案,我留下了我的 packaje.json 文件,如下所示:
{
"name": "pruebahttp1",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve",
"start": "ng serve --proxy-config proxy.conf.json" <--Esto es lo que he añadido
},
"dependencies": {
"@angular/common": "5.0.3",
"@angular/compiler": "5.0.3",
"@angular/compiler-cli": "5.0.3",
"@angular/core": "5.0.3",
"@angular/forms": "5.0.3",
"@angular/http": "5.0.3",
"@angular/platform-browser": "5.0.3",
"@angular/platform-browser-dynamic": "5.0.3",
"@ionic-native/core": "4.4.0",
"@ionic-native/splash-screen": "4.4.0",
"@ionic-native/status-bar": "4.4.0",
"@ionic/pro": "1.0.20",
"@ionic/storage": "2.1.3",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"rxjs": "5.5.2",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.18"
},
"devDependencies": {
"@ionic/app-scripts": "3.1.8",
"typescript": "2.4.2"
},
"description": "An Ionic project"
}
我已经创建了这样的 proxy.config.json 文件:
{
"/api": {
"target": "http://195.235.55.21:50072",
"secure": false
}
}
{
"/angular": {
"target": {
"host": "195.235.55.21",
"protocol": "http:",
"port": 50072
},
"secure": false,
"changeOrigin": true,
"logLevel": "info"
}
}
到目前为止,我使用 ionic serve -l 运行应用程序,但现在它告诉我必须使用 npm start 命令,当我使用它时,它不会运行应用程序并告诉我以下信息:
ng 服务 --proxy-config proxy.conf.json
作为预警,我们将在下一个版本中将 CLI npm 包移至“@angular/cli”,该版本仅支持 Node 6.9 及更高版本。该软件包将在不久后正式弃用。
要禁用此警告,请使用“ng set --global warnings.packageDeprecation=false”。您必须在 angular-cli 项目中才能使用 serve 命令。npm 错误!代码 ELIFECYCLE npm 错误!errno 1 npm 错误![email protected] 开始:
ng serve --proxy-config proxy.conf.json
npm ERR!退出状态 1 npm ERR!npm 错误![email protected] 启动脚本失败。npm 错误!这可能不是 npm 的问题。上面可能有额外的日志输出。npm 错误!可以在以下位置找到此运行的完整日志:npm ERR!
C:\Users\User\AppData\Roaming\npm-cache_logs\2018-03-12T11_26_14_674Z-debug.log
有什么想法可以解决吗?谢谢
从我在官方 Ionic 文档中阅读的内容来看,使用了 ionic 自己的 CLI(而不是
ng serve
is usedionic serve
),而不是使用 angular 的 CLI,这使得配置略有不同:例子:
http://localhost:4200/
.http://aqui.com/api/<nombre_recurso>
.因此,在文件中
ionic.config.json
添加如下条目:而且,在您的代码中,当您使用 时
http.get('/api/v1/usuarios')
,您的本地服务器将接收该请求并将其重定向到http://aqui.com/api/v1/usuarios
. 这样,对于浏览器来说,一切都来自同一个地方,您不必担心 CORS。要启动服务器,请继续使用
ionic serve
好的。对不起,我以为它一眼就能理解。在 ionic v4 中寻找代理问题的解决方案后,我意识到解决方案很简单,首先在项目的根目录中创建一个文件“proxy.conf.json”。你必须把这些数据放在那里:
在这些数据中,我们不能忘记 exp。定期“pathRewrite”使其工作。
然后,为了让它正确启动,你必须在离子服务器的启动处指出它:
ionic serve -- --proxy-config proxy.conf.json(不要忘记开头的两个中间连字符)
它对我有用,我希望它也对你有用。使用 ionic.config.json 它不起作用。
谢谢。