首次调用API遇jQuery AJAX语法错误及CORS问题求助

Hey there! Let's work through the two issues you're facing with your AJAX API call one by one.

1. Fixing the SyntaxError: unexpected token: ':' with JSONP #

That error usually pops up when you use dataType: "jsonp" but the API doesn't return valid JSONP format. JSONP requires the response to be wrapped in a callback function (like yourCallback({ "quoteText": "..." })), but if the API sends plain JSON instead, the browser tries to execute it as JavaScript and throws that syntax error—colons in raw JSON aren't valid standalone JS.

First, let's tweak your code to rule out syntax gaps (since MDN hinted at missing semicolons):

$.ajax({
  type: "GET",
  url: "url/to/API/here",
  dataType: "jsonp",
  jsonp: "callback",
  success: function(data){
    console.log(data.quoteText);
  },
  xhrFields: {
    withCredentials: false
  }
}); // Added the missing semicolon here

If that doesn't fix it, verify the API actually supports JSONP:

• Check the API docs to confirm it accepts a callback parameter (you’ve set jsonp: "callback", which is standard, but some APIs use jsonpCallback or other names).
• Check the Network tab in Firefox DevTools: if the response is plain JSON (not wrapped in a function call), JSONP won’t work for this API.

2. Resolving the CORS Error When Switching to JSON #

When you switched to dataType: "json", the CORS error happens because browsers block cross-origin requests unless the target API explicitly allows your domain via CORS headers (like Access-Control-Allow-Origin). Here’s how to fix this:

If you control the API server: #

Add CORS headers to your server’s response. For example, with Node.js/Express, use the cors middleware:

const cors = require('cors');
app.use(cors({ origin: "your-frontend-domain.com" })); // Use "*" to allow all domains (not recommended for production)

For other server tech (Apache, Nginx, etc.), set the header directly in your server config.

If you don’t control the API server: #

Use a proxy server to bypass the CORS restriction. Here’s a simple Node.js proxy example:

1. Create a small Express server:

const express = require('express');
const cors = require('cors');
const axios = require('axios');
const app = express();
app.use(cors());

app.get('/api/proxy', async (req, res) => {
  try {
    const apiResponse = await axios.get("url/to/API/here");
    res.json(apiResponse.data);
  } catch (error) {
    res.status(500).send(error.message);
  }
});

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

2. Update your frontend AJAX call to point to the proxy:

$.ajax({
  type: "GET",
  url: "http://localhost:3000/api/proxy",
  dataType: "json",
  success: function(data){
    console.log(data.quoteText);
  }
});

This way, your frontend requests your own proxy server (same origin, no CORS issue), and the proxy fetches data from the target API and sends it back to you.

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