angular 跨域请求 失败

Question

报错如下：

代码：

list(criteria: RecommendModel) {
    return this.http.post('http://music.163.com/weapi/personalized/newsong',
      criteria,
      {
       /* headers: this.headers*/
        headers: new HttpHeaders({
          'Accept': '*/*',
          'Accept-Language': 'zh-CN,zh;q=0.8,gl;q=0.6,zh-TW;q=0.4',
          'Content-Type': 'application/x-www-form-urlencoded'
        })
      })
      .toPromise()
      .then((data: any) => {
        return data;
      })
      .catch((err) => {
        console.log(err);
      });
  } 

除了设置headers ，还需要处理其他吗？
接口是来自：
https://binaryify.github.io/N...

Answer 1

这个肯定访问不了的，服务端不允许

Answer 2

首先：

了解一下跨域是什么？
跨域是浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域

其次：

一般情况下，当使用ajax请求的时候，都会使用jsonp的方式，get方式的请求，如果要求是post方式，则用jsonp就不太合适了。
这时候可以考虑是用cors,也就是所谓的跨域资源共享，
CORS定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可

所以你这里单纯只是设置客户端这边的header是没法起作用的。

Answer 3

这个是需要服务器端在响应头里面设置Access-Control-Allow-Origin: "*");
如果是别人的API, 不可能在响应头里加的话, 可以使用这个chrome插件chrome://extensions/?id=jioikioepegflmdnbocfhgmpmopmjkim来帮助你跨域.