您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計綜合問答

前端跨域請求非JSONP接口數據的實戰方案：YQL代理與現代替代技術

編輯：程式設計綜合問答

問題背景

目標接口不支援CORS跨域、不支援JSONP回調，瀏覽器同源策略直接攔截請求。且限定純前端解決，不考慮後端代理。

經典方案：Yahoo YQL代理（已停止服務）

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script>
$.ajax({
    url: 'https://query.yahooapis.com/v1/public/yql',
    dataType: 'jsonp',
    data: {
        q: 'select * from json where url="https://www.coding123.net/json.asp"',
        format: 'json'
    },
    success: function(d) {
        alert(d.query.results.now);
    }
});
</script>

重要提示：Yahoo YQL服務已於2019年1月正式關閉，此方案不可用於生產環境，僅供原理學習參考。

現代可行方案對比

方案	原理	優點	缺點	適用場景
瀏覽器擴展/用戶腳本	擁有跨域權限的擴展注入頁面	無需後端，完全前端	需用戶安裝，權限敏感	內部工具、個人項目
公共CORS代理	如cors-anywhere、allorigins	零部署，直接fetch	不穩定、有頻率限制、數據經第三方	原型驗證、非敏感數據
服務端代理（推薦）	自建Node/Java/Go中轉服務	可控、安全、支援緩存/限流	需維護後端服務	所有生產環境
Webpack/Vite開發代理	開發服務器轉發/api路徑	開發體驗無感	僅開發環境有效	前端開發調試階段
iframe+postMessage	嵌入目標域iframe通信	繞過同源策略	需目標頁配合、安全風險	合作方嵌入場景

生產級前端代理實現（Node.js + Express）

// proxy-server.js
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

const app = express();
app.use('/api-proxy', createProxyMiddleware({
    target: 'https://target-api.com',
    changeOrigin: true,
    pathRewrite: { '^/api-proxy': '' },
    onProxyRes: (proxyRes) => {
        proxyRes.headers['Access-Control-Allow-Origin'] = '*';
    }
}));
app.listen(3000);

前端調用：fetch('/api-proxy/real-endpoint')

開發環境零配置方案（Vite配置）

// vite.config.js
export default defineConfig({
    server: {
        proxy: {
            '/api': {
                target: 'https://target-api.com',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            }
        }
    }
});