angular - Web服务器不以角度运行代理配置脚本
问题描述
我最近将我的网站部署到服务器,但有一个问题是在发送 API 获取请求时出现错误 404。当我没有为代理配置 json 正确设置“ng serve”时,我之前遇到了这个错误。但是,我修复了所有错误,当我在 localhost 中使用“npm start”运行它时,我明白了
PS C:\Users\drago\Desktop\lol_search\lolsearch\searchLeague> npm start
search-league@0.0.0 startC:\Users\drago\Desktop\lol_search\lolsearch\searchLeague
ng 服务 --proxy-config=proxyconfig.json
** Angular Live Development Server 正在监听 localhost:4200,在http://localhost:4200/上打开浏览器**
一切都很完美。但是,自从我部署到服务器后,代理配置似乎又出现了错误。
这是 angular.json 文件
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"searchLeague": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/searchLeague",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/font-awesome/css/font-awesome.css"
],
"scripts": []
},
"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
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "searchLeague:build"
},
"configurations": {
"production": {
"browserTarget": "searchLeague:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "searchLeague:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"src/styles.css"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"searchLeague-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "searchLeague:serve"
},
"configurations": {
"production": {
"devServerTarget": "searchLeague:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "searchLeague"
}
这是 package.json
{
"name": "search-league",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config=proxyconfig.json",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.0.3",
"@angular/common": "^6.0.3",
"@angular/compiler": "^6.0.3",
"@angular/core": "^6.0.3",
"@angular/forms": "^6.0.3",
"@angular/http": "^6.0.3",
"@angular/platform-browser": "^6.0.3",
"@angular/platform-browser-dynamic": "^6.0.3",
"@angular/router": "^6.0.3",
"@ng-bootstrap/ng-bootstrap": "^3.2.0",
"angular-font-awesome": "^3.1.2",
"bootstrap": "^4.1.3",
"classlist.js": "^1.1.20150312",
"core-js": "^2.5.4",
"es6-shim": "^0.35.4",
"font-awesome": "^4.7.0",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.6.8",
"@angular/cli": "~6.0.8",
"@angular/compiler-cli": "^6.0.3",
"@angular/language-service": "^6.0.3",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"angular-cli-ghpages": "^0.5.3",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "~2.7.2"
}
}
这是我的 proxyconfig.json
{
"/api": {
"target": "https://na1.api.riotgames.com",
"secure": false,
"changeOrigin": true,
"pathRewrite": {
"^/api": ""
}
},
"/dragon": {
"target": "http://ddragon.leagueoflegends.com",
"secure": false,
"changeOrigin": true,
"pathRewrite": {
"^/dragon": ""
}
}
}
对于任何解决方案,我都会非常感激。谢谢
更新
import { environment } from '../../environments/environment.prod';
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
})
};
@Injectable()
export class SummonerService {
private apiurl: string;
baseApiUrl = environment.baseApiUrl;
constructor(private http: HttpClient) {}
setURL(name: string){
this.apiurl = this.baseApiUrl + '/lol/summoner/v4/summoners/by-name/' + name + '?api_key=RGAPI-ea0b3ae8-d98b-45c6-adaa-f473fb3d3dc8';
//this.apiurl = '/api/lol/summoner/v4/summoners/by-name/' + name + '?api_key=RGAPI-ea0b3ae8-d98b-45c6-adaa-f473fb3d3dc8';
}
setURL2(summonerID: string){
this.apiurl = this.baseApiUrl + '/lol/league/v4/positions/by-summoner/' + summonerID + '?api_key=RGAPI-ea0b3ae8-d98b-45c6-adaa-f473fb3d3dc8';
//this.apiurl = '/api/lol/league/v4/positions/by-summoner/' + summonerID + '?api_key=RGAPI-ea0b3ae8-d98b-45c6-adaa-f473fb3d3dc8';
}
getdata(name: string): Observable<LOLUserData>{
this.setURL(name);
return this.http.get<LOLUserData>(this.apiurl, httpOptions).pipe(
map(res => res),
catchError(error => {return throwError(true);}));
}
这就是我所做的。首先,我在 environment.prod.ts 中为 api 设置了我的基本 url。在您发送给我的示例链接中,他们只是将 api 的基本 url 设置为变量,例如
出口常量环境= {生产:真,baseApiUrl:“ https://api.com ”};
但这导致了 CORS 策略错误,所以我做了同样的事情,但使用 /api(proxyconfig.json 中的一个)来设置环境变量,如
出口常量环境= {生产:真,baseApiUrl:“/api”};
它停止抛出 CORS 错误,但我仍然看到 404 错误,当然在 localhost 中,一切正常。
我不确定获取请求是否由于部署配置无效或为获取请求设置的 API URL 错误而失败。
解决方案
推荐阅读
- java - Exception in thread "main" java.lang.NoClassDefFoundError: com/codahale/metrics/Reservoir
- php - PHP Prepared Statement插入或更新如果行存在
- android - Read all the messages in inbox
- git - How to test multiple pull-requests at once on github?
- css - jquery datatables自定义标题悬停样式
- lua - 如何为kong生成密码哈希?
- visual-studio - 无法从 Visual Studio 2017 为 Azure DevOps Server 2019 创建团队项目
- asp.net - asp中的文本框gridview:带有updatepanel的asyncpostbacktrigger
- javascript - 如何将整个文档 HTML 作为保留输入值的字符串?
- filter - 在另一个时间之前/之后找到最近的时间