离子：http请求在服务器上而不是在虚拟设备上工作答案

【问题标题】：Ionic : http request work on server and not on virtual device离子：http请求在服务器上而不是在虚拟设备上工作
【发布时间】：2018-07-06 13:08:59
【问题描述】：

我有一个用 ionci 开发的应用程序，以及一个部署了我的服务的服务器应用程序。

在浏览器中调用我的服务工作，而不是通过模拟器。

服务器上的代码

 @SpringBootApplication
 @EnableWebMvc
 public class SpringBootWebApplication extends WebMvcConfigurerAdapter{
     public static void main(String[] args) {
         SpringApplication.run(SpringBootWebApplication.class, args);
     }

     @Override
     public void addCorsMappings(CorsRegistry registry) {
          registry.addMapping("/**")
                 .allowedMethods("GET", "POST");
     }
 }

我的控制器

  @RestController
  @CrossOrigin(origins = "*")
  @RequestMapping("/api")
  public class WordController {
     private WordService wordService;

     @Autowired
     public void setWordService(WordService wordService) {
         this.wordService = wordService;
     }

     @GetMapping("/list-words-by-letter")
     @CrossOrigin(origins = "*")
     public Iterable<Word> getWordsBytLetter(String letter) {
          return wordService.listAllWordsByLetter(letter);
     }
 }

正面代码 index.html

 <!DOCTYPE html>
 <html lang="en" dir="ltr">
 <head>
   <meta charset="UTF-8">
   <title>Ionic App</title>
   <meta name="viewport" content="viewport-fit=cover, width=device-width, 
 initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <meta name="format-detection" content="telephone=no">
   <meta name="msapplication-tap-highlight" content="no">

   <meta http-equiv="Content-Security-Policy" content="default-src *;  img- 
 src * 'self' data: https:; style-src 'self' 'unsafe-inline'; script-src 
 'self' 'unsafe-inline' 'unsafe-eval'">

我的服务

import { Injectable } from '@angular/core';
import {HttpClient, HttpErrorResponse, HttpHeaders} from ' 
@angular/common/http';
 import { Observable } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 import { _throw } from 'rxjs/observable/throw';
 @Injectable()
 export class DictionnaryService {
   public API = 'http://127.0.0.1:8080';

   constructor(public http: HttpClient) {
   }

   getAllWordsByLetter(letter: string): Observable<any> {
     console.log('in getAllWordsByLetter methode service ')
     let url = this.API + '/api/list-words-by-letter?letter='+letter;

   let headers = new HttpHeaders().set("X-CustomHeader", "custom header 
 value")
   .append('Content-Type', 'application/fhir+json')
   .append("'Access-Control-Allow-Origin", "*")
   .append("Accept", "application/fhir+json");
     return this.http.get(url, { headers }).pipe(   
 catchError(this.handleError));
   }

   private handleError(error: HttpErrorResponse) {    
        console.log(    
         `Backend returned code ${error.status}, ` +
         `body was: ${error.error}, ` + `error message : ${error.message}, 
 `);
     return _throw(error.message);
   };
 }

日志显示：

07-06 12:07:20.160 25882-25882/io.ionic.starter I/chromium: [INFO:CONSOLE(208)] ****"后端返回代码 0，正文为： [object ProgressEvent]，错误消息：（未知url）的Http失败响应：0未知错误，“****，来源：file：///android_asset/www/build/main.js（208） 07-06 12:07:20.454 25882-25882/io.ionic.starter W/art: 尝试删除非 JNI 本地引用，转储线程

我认为这是一个 cors 问题。但我不知道了。
如果有人有想法？

提前致谢。

【问题讨论】：

该错误消息中没有任何内容表明这是一个 CORS 问题

标签： java rest spring-boot ionic-framework

【解决方案1】：

我不确定您遇到的问题，但我确定的一件事是您应该在服务器端而不是客户端添加 Access-Control-Allow-Origin 的配置。

所以从您的服务中删除 .append("'Access-Control-Allow-Origin", "*") 并尝试找到将其添加到 Spring 框架代码中的方法，可能在代码的 addCorsMappings 方法的注册表中作为 registry.addMapping("/**") .allowedMethods("GET", "POST") .allowedOrigins("*");

【讨论】：

【解决方案2】：

这是虚拟设备和我的本地主机之间的访问问题。

阅读本主题：How can I access my localhost from my Android device?

我改了api的url：

   public API = 'http://127.0.0.1:8080';   =>   public API = 'http://10.0.2.2:8080';

当然有更好的解决方案。就像使用代理一样，我认为是环境功能。

【讨论】：