Ionic 3应用HTTP请求iOS异常Android正常：跨域问题求助

Hey there, let's tackle this frustrating iOS CORS problem you're hitting. I’ve dealt with this exact "response with status: 0 for url : null" error plenty of times, so here are targeted fixes to get your login working on iOS:

1. Refine Your Spring Boot CORS Configuration #

The @CrossOrigin annotation might not be enough on its own, especially with iOS's WKWebView behavior. Try these tweaks:

• Specify exact allowed origins: iOS apps use custom schemes like ionic://localhost or capacitor://localhost (instead of just http://localhost:8100). Update your controller annotation to include these:

  @CrossOrigin(origins = {"http://localhost:8100", "ionic://localhost", "capacitor://localhost"}, allowCredentials = "true")
  @RestController
  @RequestMapping("/api/customerr")
  public class loginController extends NamedParameterJdbcDaoSupportClas...
  

• Use global CORS config (instead of per-controller): If you have multiple endpoints, a global config avoids repetition and ensures consistency. Add this to your Spring Boot app:

  @Configuration
  public class WebCorsConfig implements WebMvcConfigurer {
      @Override
      public void addCorsMappings(CorsRegistry registry) {
          registry.addMapping("/api/**")
                  .allowedOrigins("http://localhost:8100", "ionic://localhost", "capacitor://localhost")
                  .allowedMethods("GET", "POST", "PUT", "DELETE")
                  .allowedHeaders("*")
                  .allowCredentials(true);
      }
  }
  

2. Fix WKWebView's Strict CORS Rules #

Ionic 3 uses WKWebView by default on iOS, which has stricter cross-domain policies than Android's WebView. Try these Ionic config changes:

• Allow your API in config.xml: Add these lines to whitelist your AWS API URL and adjust WKWebView settings:

  <preference name="WKWebViewOnly" value="true" />
  <feature name="CDVWKWebViewEngine">
      <param name="ios-package" value="CDVWKWebViewEngine" />
  </feature>
  <preference name="CORSAllowlist" value="https://your-aws-api-domain.com" />
  

• Switch to a native HTTP plugin: WebView-based requests are subject to CORS, but native plugins bypass this. Install cordova-plugin-advanced-http and rewrite your login request to use it instead of Angular's HttpClient. For example:

  import { HTTP } from '@ionic-native/http/ngx';
  
  constructor(private http: HTTP) {}
  
  login(username: string, password: string) {
    this.http.post('https://your-aws-api-domain.com/api/customerr/login', 
      { username, password }, 
      { 'Content-Type': 'application/json' }
    ).then(response => {
      // Handle success
    }).catch(error => {
      // Handle error
    });
  }
  

3. Check AWS Layer CORS Settings #

If your Spring Boot API sits behind AWS services like API Gateway or CloudFront, their CORS settings might override your app's config:

• API Gateway:
  1. Go to your API Gateway console, select your API, and navigate to the "CORS" section.
  2. Add ionic://localhost, capacitor://localhost, and your production app domains to "Allowed Origins".
  3. Ensure "Allowed Methods" includes POST, "Allowed Headers" includes Content-Type, and "Allow Credentials" is checked.
• CloudFront: If using CloudFront as a CDN, verify that your cache policy doesn't strip CORS response headers like Access-Control-Allow-Origin.

4. Debug with Safari Developer Tools #

To pinpoint exactly what's failing:

1. On your Mac, open Safari → Preferences → Advanced → Check "Show Develop menu in menu bar".
2. Connect your iOS device to your Mac, enable web inspector on the device (Settings → Safari → Advanced → Web Inspector).
3. In Safari's Develop menu, select your device and your Ionic app.
4. Trigger the login request and check the Network tab:
   • Look for the login request's "Origin" header to confirm what's being sent.
   • Check if the response includes valid CORS headers (like Access-Control-Allow-Origin matching the request origin).
   • If the request shows "cancelled" status, WKWebView blocked it due to CORS violations.

5. Temporary Test: Fall Back to UIWebView #

As a quick sanity check, switch back to UIWebView (deprecated but useful for debugging) in config.xml:

<preference name="WKWebViewOnly" value="false" />

If login works now, the issue is definitely WKWebView-specific, and you can focus on fixing the WKWebView CORS config.

内容的提问来源于stack exchange，提问作者NITISH