关于ajax跨域的问题

关于ajax跨域的问题

---

1.同源策略

同源策略限制了一个源（origin）中加载文本或脚本与来自其它源（origin）中资源的交互方式；

同源定义

如果两个页面拥有相同的协议（protocol），端口（如果指定），和主机，那么这两个页面就属于同一个源（origin）。
下表给出了相对http://store.company.com/dir/page.html同源检测的示例:

URL	结果	原因
http://store.company.com/dir2/other.html	成功
http://store.company.com/dir/inner/another.html	成功
https://store.company.com/secure.html	失败	协议不同
http://store.company.com:81/dir/etc.html	失败	端口不同
http://news.company.com/dir/other.html	失败	主机名不同
可参见：origin definition for file: URLs.

2.需求

• 需要通过第三方开放api来获取信息
• 希望在前端完成服务功能，不牵涉服务端功能转化

基于以上两点，就牵涉到跨域请求的问题。所以首先想到ajax的jsonp跨域实现。感觉很简单的样子。
代码：

$.ajax({
      type:'get',
      url: 'http://ip.taobao.com/service/getIpInfo.php',
      dataType: 'jsonp',
      jsonp: 'callback',
      data: {ip: '115.214.215.91'},
      success: function(data) {
        console.log(data);
      }
    });

请求服务后，客户端不停地报错。

但是在浏览器中访问又能拿到json数据。纠结~
最后网上各种找资源，各种找解决办法。最终找到症结所在。

3.原因

在ajax跨域请求的时候，服务端提供的回调参数在客户端请求的时候要跟服务端保持一致，不然就会出现这种错误。

• 解决办法可参考:JSONP跨域请求数据报错 “Unexpected token :”的解决办法.
• 详细描述可参考：jsonp对返回的json格式报错"Uncaught SyntaxError: Unexpected token :".

最终还是得依靠后台来处理这个服务。