Angular 如何将变量传递到代理服务器url?
我试图找到一种方法,将某些变量传递给我的代理,这样我就可以使用一些参数调用API,就像下面的示例一样 我的代理配置如下所示:Angular 如何将变量传递到代理服务器url?,angular,typescript,proxy-server,Angular,Typescript,Proxy Server,我试图找到一种方法,将某些变量传递给我的代理,这样我就可以使用一些参数调用API,就像下面的示例一样 我的代理配置如下所示: { "/darksky/*": { "target": "https://api.darksky.net/forecast/APIKEY/", "secure": false, "logLevel": "debug", "changeOrigin": true } } 在服务中,我调用此代理,如下所示: return this
{
"/darksky/*": {
"target": "https://api.darksky.net/forecast/APIKEY/",
"secure": false,
"logLevel": "debug",
"changeOrigin": true
}
}
在服务中,我调用此代理,如下所示:
return this.http.get(`/darksky/${x},${y},${date}?exclude=hourly,daily,flags&units=auto`);
如您所见,我试图将某些变量传递给url-x、y和日期以及一些静态设置,但在控制台中显示:
[HPM] GET /darksky/53.1219648,18.0002529,2019-12-04T12:00:00?exclude=hourly,daily,flags&units=auto -> https://api.darksky.net/forecast/APIKEY/
api返回请求的格式错误,因为我缺少这些额外的变量。那么,如何将某些内容传递给代理,使实际重定向看起来像这样:
https://api.darksky.net/forecast/APIKz/53.1219648,18.0002529,2019-12-04T12:00:00?exclude=hourly,daily,flags&units=auto
编辑:angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"fe": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/fe",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": false,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": [
"node_modules/alertifyjs/build/alertify.min.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "fe:build",
"proxyConfig": "src/app/proxyServer/proxy.config.json"
},
"configurations": {
"production": {
"browserTarget": "fe:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "fe:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "fe:serve"
},
"configurations": {
"production": {
"devServerTarget": "fe:serve:production"
}
}
}
}
}},
"defaultProject": "fe"
}
您的控制台输出是
[HPM] GET /darksky/53.1219648,18.0002529,2019-12-04T12:00:00?exclude=hourly,daily,flags&units=auto -> https://api.darksky.net/forecast/APIKEY/
这是正确的,因为在箭头(->)之后,日志显示GET请求
/darksky/53.1219648,18.00025292019-12-04T12:00:00?排除=小时、每日、旗帜和单位=自动
是主机的代理吗
https://api.darksky.net/forecast/APIKEY/
(在->之后)
因为这是您在proxy.conf.json
中提到的,所以它的工作方式与您所写的一样
这是一个请求问题,您的最终请求是
https://api.darksky.net/forecast/APIKEY/darksky/53.1219648,18.0002529,2019-12-04T12:00:00?exclude=hourly,daily,flags&units=auto
这是错误的,根据Darksky api,请求中不应该有Darksky关键字
你的请求应该是
https://api.darksky.net/forecast/APIKEY/53.1219648,18.0002529,2019-12-04T12:00:00?exclude=hourly,daily,flags&units=auto
@普洛奇指出了这个问题,我设法找到了解决办法:
{
"/darksky/*": {
"target": "https://api.darksky.net/forecast/APIKEY",
"secure": false,
"logLevel": "debug",
"changeOrigin": true,
"pathRewrite": {"^/darksky" : ""}
}
}
只需将“pathRewrite”添加到“proxy.config.json”中即可,就像上面的代码片段一样。如何启动应用程序?只是
ng serve
?是的,但是我已经将代理添加到angular.json中。请发布package.json开始脚本抱歉,我已经阅读了package.json的angular.json istead-我将检查您的answear。按照我的假设,在代理配置中尝试/darksky
或/darksky/**
,问题仍然存在。将“proxyConfig”:“src/app/proxyServer/proxy.config.json”放在angular.json中,并以ng serve开始,这是另一种与您提到的完全相同的方法。来自API的控制台nad响应中的输出与之前完全相同。它仍然无法读取变量。代理可以很好地工作,因为它重定向到目标-但是如何向目标添加额外的url?我认为在->之后应该是这样的://api.darksky.net/forecast/APIKEY//53.1219648,18.00025292019-12-04T12:00:00?exclude=hourly,daily,flags&units=auto这意味着,当我通过代理调用api时,api返回的结果就好像请求是错误构建的一样,例如,我在url中丢失了一些内容,但我将完全相同的url放入浏览器,它返回正确的数据。代理是否会以某种方式更改任何内容,或者它实际上只调用“”-没有其他参数?我的答案有意义吗?是的,我理解这个问题-因为我想确切地知道代理后url的外观-我现在只是想弄清楚如何绕过它。