前端跨域问题，先概括一下总的方法，然后详细解释常用的

posted @ Sep 29, 2015

前端跨域问题，先概括一下总的方法，然后详细解释常用的

产生跨域问题的原因

跨域问题是浏览器同源策略限制，当前域名的js只能读取同域下的窗口属性。

跨域问题产生的场景

当要在在页面中使用js获取其他网站的数据时，就会产生跨域问题，比如在网站中使用ajax请求其他网站的天气、快递或者其他数据接口时以及hybrid app中请求数据，浏览器就会提示以下错误。这种场景下就要解决js的跨域问题。

XMLHttpRequest cannot load http://你请求的域名. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://当前页的域名' is therefore not allowed access.

哪些情况会产生跨域问题

  • 一个网站的网址组成包括协议名，子域名，主域名，端口号。比如 https://github.com/ ，其中https是协议名，www是子域名，github是主域名，端口号是80，当在在页面中从一个url请求数据时，如果这个url的协议名、子域名、主域名、端口号任意一个有一个不同，就会产生跨域问题。
  • 即使是在 http://localhost:80/ 页面请求 http://127.0.0.1:80/ 也会有跨域问题

解决跨域问题

解决跨域问题有以下一种方式

1、使用jsonp(详细的文章在下一篇)
2、服务端代理
3、服务端设置Request Header头中Access-Control-Allow-Origin为指定可获取数据的域名

a.服务端设置Access-Control-Allow-Origin 这种方式只要服务端把response的header头中设置Access-Control-Allow-Origin为制定可请求当前域名下数据的域名即可。一般情况下设为即可。这样客户端就不需要使用jsonp来获取数据。 b.关于Access-Control-Allow-Origin设为是否会有安全问题，知乎上有个讨论。

http://www.zhihu.com/question/22992229

c.浏览器支持

d.Access-Control-Allow-Origin是html5新增的一项标准，IE10以下是不支持的，所以如果产品面向的是PC端，就要使用服务端代理或jsonp。

4、CORF

  • CORF是跨站资源共享的简称，具体细节过多，详情可以参考 http://www.html5rocks.com/en/tutorials/cors/ https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS

  • 如果只是简单的获取局部数据的话，操作并不难，下面是Express的一个简单实现（REST API端）

    app.all('*',function(req,res,next){
   res.set({
       'Access-Control-Allow-origin' : '*',
       'Access-Control-Allow-Headers' : 'X-Requested-With',
       'Access-Control-Allow-Methods' : 'GET'
   }) ;
    next();
});

  • 我用的http://127.0.0.1:1337作为静态文件服务器，从http://127.0.0.1:1336 REST API获取数据。

    var xhr = new XMLHttpRequest(); xhr.open(‘GET’,’http://127.0.0.1:1336/blog’,true); xhr.addEventListener(‘load’,function(e){ console.log(this.response); }) xhr.send();

  • Access-Control-Allow-origin属于必填项，*属于通配符，如果没有，就会报错XMLHttpRequest cannot load http://127.0.0.1:1336/blog. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:1337' is therefore not allowed access.。

5、图像Ping (略)
6、flash (略)
7、iframe（略）