能否通过AJAX调用外部网站页面？请求排查频道列表调用脚本错误

首先直接说核心问题：你遇到的是浏览器**同源策略（Same-Origin Policy）**的限制——浏览器默认不允许前端JavaScript直接向不同域名的服务器发送AJAX请求，这是为了安全考虑。接下来咱们一步步拆解你的脚本问题和可行的解决办法：

你的脚本里的具体错误 #

• 请求方式与JSONP冲突：你同时用了type: 'POST'和callback=?（JSONP的写法），但JSONP本质是通过动态创建<script>标签实现的，只能支持GET请求，POST和JSONP根本不兼容，这会直接导致请求异常。
• error回调变量错误：你的error函数里用了data变量，但这个变量并没有被定义，应该用回调参数e来获取错误信息，比如alert('Error: '+e.statusText)。
• 目标接口不支持JSONP：即使你改成GET请求，nilesat.com.eg的这个接口也不会返回JSONP格式的响应（可以手动访问http://www.nilesat.com.eg/en/Home/ChannelList?channelType=1&callback=test看看，返回的是普通HTML，不是test(...)包裹的内容），所以JSONP这条路走不通。

可行的解决办法 #

1. 服务器端代理（最推荐） #

既然前端直接跨域受限，咱们可以在自己的服务器上搭一个"中间层"，由服务器去请求目标网站的内容，再把结果返回给前端。这样前端请求的是自己域名下的接口，就不会有跨域问题了。

举个Node.js+Express的简单代理示例：

// 服务器端代码
const express = require('express');
const axios = require('axios');
const app = express();

// 代理接口
app.get('/get-channel-list', async (req, res) => {
  try {
    // 向目标网站发起请求
    const response = await axios.get('http://www.nilesat.com.eg/en/Home/ChannelList', {
      params: { channelType: 1 }
    });
    // 将返回的HTML传给前端
    res.send(response.data);
  } catch (error) {
    res.status(500).send('获取频道列表失败');
  }
});

app.listen(3000, () => console.log('代理服务运行在 http://localhost:3000'));

然后修改你的前端脚本，请求自己的代理接口：

function showValues(){ 
  // 请求自己服务器的代理接口
  var myUrl="/get-channel-list"; 
  $.ajax({ 
    url: myUrl, 
    type: 'GET', 
    success: function(data) { 
      $('#showdata').html(data); 
    }, 
    error: function(e) { 
      alert('Error: '+e.statusText); 
    } 
  }); 
} 
showValues();

2. 检查目标网站是否支持CORS #

如果目标服务器设置了Access-Control-Allow-Origin响应头，允许你的域名访问，那可以直接用AJAX请求，但我查了下nilesat.com.eg的响应头，并没有这个设置，所以这个方法行不通。

总结 #

你的脚本主要问题是跨域限制+请求方式与JSONP不兼容+错误回调变量误用，最靠谱的解决方式是通过服务器端代理来绕过跨域限制。

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