需为REST-API响应设置哪些头，才能让Ionic 3 WebApp的GET请求正常工作？

Hey there! It sounds like you've hit a classic cross-origin or response header snag—since your API works perfectly in browsers and Postman but not in your Ionic app, let's break down the fix step by step.

The Most Likely Culprit: CORS (Cross-Origin Resource Sharing) #

Browsers enforce strict CORS rules that tools like Postman or direct browser requests don't. Even if your JSON structure matches the public API, if your Go API isn't sending the right cross-origin headers, your Ionic app's HTTP request will get blocked silently (or throw an error you might miss in the console).

Fix: Add CORS Headers to Your Go API #

You mentioned setting content-type: application/json, but that's only part of the puzzle. You need to explicitly allow cross-origin requests from your Ionic app's domain. Here's a simple way to add CORS handling to your Go API with a middleware function:

// Middleware to enable CORS for all requests
func enableCORS(w *http.ResponseWriter) {
    // For development, use "*" to allow all origins—replace with your Ionic app's actual domain in production
    (*w).Header().Set("Access-Control-Allow-Origin", "*")
    // Allow the HTTP methods your app uses (adjust based on your needs)
    (*w).Header().Set("Access-Control-Allow-Methods", "GET, POST, OPTIONS")
    // Allow headers your app might send (like Content-Type for POST/PUT requests)
    (*w).Header().Set("Access-Control-Allow-Headers", "Content-Type")
}

// Example handler for your GET endpoint
func getUserList(w http.ResponseWriter, r *http.Request) {
    // First, enable CORS for this request
    enableCORS(&w)

    // Handle OPTIONS preflight requests (browsers send these before actual GET/POST calls)
    if r.Method == "OPTIONS" {
        w.WriteHeader(http.StatusOK)
        return
    }

    // Set content-type and send your JSON response
    w.Header().Set("Content-Type", "application/json")
    // Replace with your actual data retrieval logic
    users := []User{{ID: 1, Name: "Leanne Graham"}, {ID: 100, Name: "I COME FROM YOUR OWN REST-API!!!"}}
    json.NewEncoder(w).Encode(users)
}

Verify Your Ionic App's Request Handling #

Even with the right headers, it's smart to confirm your app is actually receiving data (or catch any hidden errors). Add error logging to your Angular HTTP call to see what's happening under the hood:

// In your Ionic page or service
import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

loadUsers() {
    this.http.get('http://your-go-api-url/users')
        .subscribe(
            (data: any[]) => {
                console.log('Raw API response:', data); // Check if data is coming through
                this.userList = data; // Assign to your list variable for ngFor
            },
            (error) => {
                console.error('API Request Failed:', error); // This will show CORS errors or status code issues
            }
        );
}

Quick Checks to Rule Out Other Issues #

• Response Status Code: Ensure your Go API returns a 200 OK status code. If it sends a 404 or 500, Angular will treat it as an error and skip processing the data.
• JSON Consistency: Double-check that your API's JSON output matches the public API's structure exactly (same field names, array format, no invalid characters). Use console.log to compare responses from both APIs in your browser's dev tools.
• Device Accessibility: If testing on a device/emulator, use your computer's local IP (instead of localhost) to ensure the device can reach your Go API.

Once you add the CORS headers and handle the OPTIONS preflight request, your Ionic list should populate just like it does with the public API!

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