AngularJS Promise请求双URL遇Access-Control-Allow-Origin跨域问题求解

嘿，这个跨域问题我之前在项目里也碰到过，AngularJS里完全有对应的解决办法，主要看你能不能控制目标服务器的配置，分几种情况来处理：

一、用AngularJS的$http.jsonp实现（和jQuery JSONP原理一致） #

既然你用jQuery的GET+JSONP能解决，那AngularJS里也有原生的JSONP支持，只需要把你原来的loadingJson函数改成用$http.jsonp发起请求就行，核心是要让目标服务器支持JSONP返回格式。

代码示例： #

// 先改写你的loadingJson函数，改用$http.jsonp
function loadingJson(url) {
  // 必须在URL末尾加上?callback=JSON_CALLBACK，AngularJS会自动替换成随机生成的回调函数名
  return $http.jsonp(`${url}?callback=JSON_CALLBACK`);
}

var promises = [];
promises.push(loadingJson('example.com/1.json'));
promises.push(loadingJson('example.com/2.json'));

$q.all(promises).then(function(resultList) {
  // 注意：$http.jsonp返回的响应对象里，实际数据存在data属性中
  const dataFrom1 = resultList[0].data;
  const dataFrom2 = resultList[1].data;
  // 这里处理你的业务逻辑
}, function(errList) {
  // 处理请求失败的情况
  console.error('请求出错:', errList);
});

关键注意点： #

• 目标服务器必须支持JSONP：也就是能识别callback参数，把返回的JSON数据包裹在这个参数指定的函数调用里，比如返回内容类似JSON_CALLBACK({"name": "test"})。
• AngularJS的JSONP必须指定callback=JSON_CALLBACK这个固定占位符，框架会自动替换成唯一的回调函数名，避免冲突。

二、配置服务器端开启CORS（更标准的跨域方案） #

如果有权限控制目标服务器（example.com）的配置，那开启CORS是比JSONP更安全、更灵活的方案，支持POST/PUT等所有HTTP方法，也不需要改前端的$http.get逻辑。

具体操作： #

在目标服务器的响应头里添加Access-Control-Allow-Origin字段，允许你的域名（www.abc）访问：

• 比如用Nginx的话，在配置里加：add_header Access-Control-Allow-Origin https://www.abc;
• 用Node.js/Express的话，用cors中间件：app.use(cors({ origin: 'https://www.abc' }))
• 生产环境不建议直接设为*（允许所有域名），尽量指定具体的可信域名。

配置完成后，你原来的代码不需要任何修改，$q.all结合$http.get就能正常跨域请求数据了。

三、备选方案：使用代理服务器（如果以上两种都做不到） #

如果目标服务器既不支持JSONP，也没法修改CORS配置，那可以在你自己的Web服务器（www.abc）上搭建一个代理：

• 前端请求同域的地址，比如/proxy/1.json
• 你的服务器把这个请求转发到example.com/1.json，然后把响应返回给前端
  这样浏览器会认为是同域请求，就不会触发跨域限制了。

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