2017-03-28 30 views
1

我想打一個簡單的應用程序與http要求,但我已經和問題與cors離子2.離子2 GET HTTP://本地主機:8100 /搜索/含水查詢= 404(未找到)

首先,我改變了我的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()); 
    } 
} 

weather.ts

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> 

這是我收到的錯誤。 enter image description here

我只找到一個解決方案 - 「添加代理來ionic.config.json」,但無法得到它的工作。

+0

當這個錯誤來了嗎? – Sampath

+0

有什麼東西在http:// localhost:8100/search/aq上偵聽? 您可以使用郵遞員這樣的程序輕鬆測試您的web服務。 –

+0

我遇到這個錯誤,當我想搜索任何城市。 'http://autocomplete.wunderground.com/aq?query=query'我想用這個。 – Nagikho

回答

1

我終於解決了,我已經安裝了科爾多瓦,然後添加'科爾多瓦插件添加科爾多瓦插件白名單'。 在項目index.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 *"> 
相關問題