使用jQuery AJAX+Autocomplete调用机场API遇跨域及JSONP语法错误求助

Hey there! Let's break down why your airport autocomplete setup is hitting those errors and fix them up properly.

What's Causing the Issues? #

• JSON Request Blocked: The iatacodes.org API doesn’t have CORS (Cross-Origin Resource Sharing) enabled for your frontend domain. Browsers block cross-origin requests by default unless the server explicitly allows your origin via Access-Control-Allow-Origin headers—adding this header to your AJAX request won’t work because headers are controlled by the server, not the client.
• JSONP Syntax Error: JSONP requires the API to return data wrapped in a function call (like myCallback({ "key": "value" })), but the IATA autocomplete API sends back plain JSON. When jQuery tries to parse that as JSONP, it throws a syntax error because of the unexpected colon in the raw JSON.

Critical Note First: Stop Exposing Your API Key! #

You’ve hardcoded your api_key directly in your frontend JavaScript. Anyone can inspect your page source and steal this key to make their own requests, which could lead to rate limits being hit or unauthorized usage of your API quota. You must move this API call to your own backend server—never keep sensitive keys in client-side code.

Step-by-Step Solutions #

1. Use a Backend Proxy (Recommended & Secure) #

This is the most reliable fix. Here’s how it works:

• Create a simple endpoint on your backend (e.g., /api/airport-autocomplete) that accepts a query parameter.
• Your backend makes the request to the IATA API with your secure API key (stored safely on the server).
• The backend returns the JSON data to your frontend. Since this is a same-origin request, no CORS issues will pop up.

Example backend snippet (Node.js/Express):

const express = require('express');
const axios = require('axios');
const app = express();

// Store your API key in environment variables, not hardcoded!
const API_KEY = process.env.IATA_API_KEY;

app.get('/api/airport-autocomplete', async (req, res) => {
  try {
    const { query } = req.query;
    const apiResponse = await axios.get('https://iatacodes.org/api/v6/autocomplete', {
      params: { api_key: API_KEY, query }
    });
    res.json(apiResponse.data);
  } catch (err) {
    res.status(500).json({ error: 'Failed to fetch airport data' });
  }
});

app.listen(3000, () => console.log('Proxy server running on port 3000'));

Then update your frontend code to call your proxy endpoint:

$("#city").autocomplete({
  source: function(request, response) {
    $.ajax({
      type: "GET",
      dataType: 'json',
      url: "/api/airport-autocomplete",
      data: { query: request.term },
      success: function(data) {
        response(data);
      }
    });
  },
  minLength: 3,
  select: function(event, ui) {
    log(ui.item ? "Selected: " + ui.item.label : "Nothing selected, input was " + this.value);
  },
  open: function() {
    $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
  },
  close: function() {
    $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
  }
});

2. Check for JSONP Support (Unlikely, but Worth a Shot) #

Some APIs let you add a callback parameter to get JSONP-formatted responses. Double-check the IATA Codes API docs to see if they support this. If they do, jQuery will automatically handle the callback when you set dataType: 'jsonp'—but based on your error, it seems this API doesn’t support JSONP, so this approach probably won’t work.

Final Quick Tips #

• Always store API keys in environment variables on your backend, never in client-side code.
• Test your proxy endpoint first with tools like Postman to confirm it’s returning the correct data.
• If you don’t have access to a backend, avoid using public CORS proxies (they’ll still expose your API key to anyone monitoring requests).

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