Angular 离子2型http://localhost:8100/search/aq?query= 404（未找到）

我想制作一个带有

http

请求的简单应用程序，但我在爱奥尼亚2中遇到了

cors

问题

首先，我更改了我的

ionic.config.json

{
  "name": "weatherapp",
  "app_id": "",
  "v2": true,
  "typescript": true,
   "proxies": [
    {
      "path": "/api",
      "proxyUrl": "http://api.wunderground.com/api"
    },
    {
      "path":"/search",
      "proxyUrl": "http://autocomplete.wunderground.com"
    }
  ]
}

weather.service.ts

import {Injectable, Inject} from '@angular/core';
import {Http} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/Rx';

@Injectable()
export class WeatherService {
        http: any;
        searchUrl: any;
        apiKey: string;
        conditionsUrl: string;
    static get parameters(){
        return [Http];
    }

    constructor(http){
        this.http = http;
        console.log('Service Connected : )');
        this.apiKey = '1e4420a89011eef4';
        this.conditionsUrl= 'http://api.wunderground.com/api/'+this.apiKey+'/conditions/q';
        this.searchUrl='http://localhost:8100/search/aq?query=';
    }

    getWeather(city, state){
        return this.http.get(this.conditionsUrl+'/'+state+'/'+city+'.json')
        .map(res => res.json());
    }

     searchCities(searchStr){
        return this.http.get(this.searchUrl+''+searchStr)
           .map(res => res.json());
    }
}

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { OnInit } from '@angular/core';
import { WeatherService } from '../../services/weather.service';

@Component({
  selector: 'page-weather',
  templateUrl: 'weather.html',
  providers: [WeatherService]
})
export class WeatherPage {
    results: any;
    searchStr: any;
    weather: any;
    state: string;
    city: string;

  weatherService : WeatherService;
  static get parameters(){
    return [[WeatherService]];
  }

  constructor(weatherService) {
    this.weatherService = weatherService;
    this.city = 'Istanbul';
    this.state = '';
    this.searchStr;
    this.weather;
    this.results;
  }

  ngOnInit(){
    this.weatherService.getWeather(this.city, this.state)
    .subscribe(weather => {
      //console.log(weather);,
      this.weather = weather.current_observation;
    })
  }

  getQuery(){
        this.weatherService.searchCities(this.searchStr)
    .subscribe(res => {
      //console.log(weather);
      this.results = res.RESULTS
     console.log(this.results);
    })
  }
}

weather.ts

import {Injectable, Inject} from '@angular/core';
import {Http} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/Rx';

@Injectable()
export class WeatherService {
        http: any;
        searchUrl: any;
        apiKey: string;
        conditionsUrl: string;
    static get parameters(){
        return [Http];
    }

    constructor(http){
        this.http = http;
        console.log('Service Connected : )');
        this.apiKey = '1e4420a89011eef4';
        this.conditionsUrl= 'http://api.wunderground.com/api/'+this.apiKey+'/conditions/q';
        this.searchUrl='http://localhost:8100/search/aq?query=';
    }

    getWeather(city, state){
        return this.http.get(this.conditionsUrl+'/'+state+'/'+city+'.json')
        .map(res => res.json());
    }

     searchCities(searchStr){
        return this.http.get(this.searchUrl+''+searchStr)
           .map(res => res.json());
    }
}

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { OnInit } from '@angular/core';
import { WeatherService } from '../../services/weather.service';

@Component({
  selector: 'page-weather',
  templateUrl: 'weather.html',
  providers: [WeatherService]
})
export class WeatherPage {
    results: any;
    searchStr: any;
    weather: any;
    state: string;
    city: string;

  weatherService : WeatherService;
  static get parameters(){
    return [[WeatherService]];
  }

  constructor(weatherService) {
    this.weatherService = weatherService;
    this.city = 'Istanbul';
    this.state = '';
    this.searchStr;
    this.weather;
    this.results;
  }

  ngOnInit(){
    this.weatherService.getWeather(this.city, this.state)
    .subscribe(weather => {
      //console.log(weather);,
      this.weather = weather.current_observation;
    })
  }

  getQuery(){
        this.weatherService.searchCities(this.searchStr)
    .subscribe(res => {
      //console.log(weather);
      this.results = res.RESULTS
     console.log(this.results);
    })
  }
}

weather.html

<ion-header>
  <ion-navbar>
    <ion-title>Weather Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding class="body">
  <ion-grid *ngIf="weather">
    <ion-row>
      <ion-col width-100>
        <ion-list>
          <ion-item>
            <ion-label fixed>Enter City</ion-label>
            <ion-input (keyup)="getQuery()" [(ngModel)]="searchStr" type="text"></ion-input>
          </ion-item>
        </ion-list>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col width-50 offset-25>
        <h2 class="location">{{weather.display_location.full}}</h2>
        <div class="icon"><img src="{{weather.icon_url}}"></div>
        <h3 class="desc">{{weather.weather}}</h3>
        <h1 class="temp">{{weather.temp_c}}&deg;</h1>
      </ion-col>
    </ion-row>
      <ion-row>
      <ion-col width-100>
        <ion-list>
          <ion-item>
            <strong>Temp: </strong>{{weather.temperature_string}}
          </ion-item>
          <ion-item>
            <strong>Relative Humidity: </strong>{{weather.relative_humidity}}
          </ion-item>
          <ion-item>
            <strong>Dewpoint: </strong>{{weather.dewpoint_string}}
          </ion-item>
          <ion-item>
            <strong>Visibility: </strong>{{weather.visibility_mi}}
          </ion-item>
          <ion-item>
            <strong>Wind: </strong>{{weather.wind_mph}} Mph
          </ion-item>
          <ion-item>
            <strong>Wind Direction: </strong>{{weather.wind_dir}}
          </ion-item>
          <ion-item>
            <strong>Heat Index: </strong>{{weather.heat_index_string}}
          </ion-item>
          <ion-item>
            <strong>Last Updated: </strong>{{weather.observation_time_rfc822}}
          </ion-item>
        </ion-list>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

天气预报之家
进城
{{weather.display_location.full}
{{weather.weather}
{{weather.temp_c}}°；
温度：{{weather.temperature\u string}
相对湿度：{{天气.相对湿度}
露点：{{weather.Dewpoint\u string}
能见度：{{weather.Visibility{u mi}
风：{{天气。风{mph}}mph
风向：{{weather.Wind\u dir}
热度指数：{{weather.Heat_Index_string}
上次更新：{{weather.observation\u time\u rfc822}

这是我收到的错误。

---

我只找到了一个解决方案-“向ionic.config.json添加代理”，但无法使其正常工作。

我最终解决了这个问题，我安装了cordova，然后添加了“cordova插件添加cordova插件白名单”。 在projectindex.html中，我添加了

<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-eval' 'unsafe-inline' *; object-src 'self'; style-src 'self' 'unsafe-inline'; media-src *">

此错误何时出现？是否有任何正在监听的内容？你可以使用像Postman这样的程序轻松地测试你的Web服务。当我想搜索任何城市时，我都会遇到这个错误我想用这个。