Yelp Fusion API的JSONP失败

Yelp Fusion API的JSONP失败问题分析

基础概念

Yelp Fusion API是Yelp提供的商业数据接口，允许开发者访问Yelp的商业目录和评价数据。JSONP(JSON with Padding)是一种跨域数据请求的技术，通过动态创建<script>标签来绕过浏览器的同源策略限制。

JSONP失败的可能原因

Yelp Fusion API不再支持JSONP：现代API通常更倾向于使用CORS(跨域资源共享)而不是JSONP，因为JSONP存在安全风险。
回调参数不正确：JSONP请求需要指定正确的回调函数名参数，通常是通过callback或jsonp参数传递。
请求格式错误：JSONP请求的URL构造可能不正确。
API密钥问题：可能没有提供有效的API密钥或密钥权限不足。
网络限制：某些网络环境可能阻止了JSONP请求。

解决方案

1. 改用CORS请求

推荐使用现代fetch API或axios进行CORS请求：

fetch('https://api.yelp.com/v3/businesses/search?location=San+Francisco', {
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY'
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

2. 检查JSONP请求格式

如果必须使用JSONP，确保请求格式正确：

function handleResponse(data) {
  console.log(data);
}

const script = document.createElement('script');
script.src = 'https://api.yelp.com/v3/businesses/search?location=San+Francisco&callback=handleResponse';
document.body.appendChild(script);

3. 验证API支持

检查Yelp Fusion API最新文档，确认是否仍支持JSONP。现代API通常推荐使用OAuth 2.0和CORS。

4. 服务器端代理方案

如果遇到跨域问题，可以设置服务器端代理：

// Node.js Express示例
const express = require('express');
const axios = require('axios');
const app = express();

app.get('/api/yelp-proxy', async (req, res) => {
  try {
    const response = await axios.get('https://api.yelp.com/v3/businesses/search', {
      params: req.query,
      headers: {
        'Authorization': 'Bearer YOUR_API_KEY'
      }
    });
    res.json(response.data);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.listen(3000);