Я недавно развернул свой веб-сайт на сервере, и есть одна проблема: я получил ошибку 404 при отправке запроса на получение API.Раньше я получал эту ошибку, когда неправильно установил «ng serve» для конфигурации прокси json.Тем не менее, я исправил все ошибки, и когда я запустил его с «npm start» в localhost, я получил его
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 serve --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);}));
}
Это то, что я сделал.Прежде всего, я установил свой базовый URL для api в environment.prod.ts.В примерах ссылок, которые вы мне прислали, они просто устанавливают базовый URL для api в переменную, такую как
export const environment = {production: true, baseApiUrl: "https://api.com"};
, но это вызвало ошибку политики CORS, поэтому я сделал то же самое, но использовал / api (один в proxyconfig.json), чтобы установить переменную среды, такую как
export constenvironment = {production: true, baseApiUrl: "/ api"};
перестало выдавать ошибку CORS, но я все еще вижу ошибку 404 и, конечно, в localhost все работает отлично.
Я не уверен, что запрос get завершился неудачно из-за неверной конфигурации для развертывания или неверно задан URL-адрес API для запроса get.