Ajax跨域问题及解决方案

为什么会出现跨域问题

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。

原生ajax 在请求接口的时候， 如果使用的是本地服务器。

 http://localhost:63342/main/index.html
 https://sp0.baidu.com/s?wd=1

不一致会产生跨域

• 协议不一样 http https
• 主机名称不一致 localhost 127.0.0.1 sp0.baidu.com 124.3.9.2
• 端口号不一致 63342 80
• 报错 Access-Control-Allow-Origin 产生跨域

遇到ajax跨域问题，浏览器的错误如下：

XMLHttpRequest cannot load http://目标地址No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://当前页面地址’ is therefore not allowed access.

解决跨域问题

1.cros跨域 （跨域资源共享)

在后端 java php node 配置 配置响应头 header(“Access-Control-Allow-Origin”,"*"); 允许所有来访问
如果需要指定某域名才允许跨域访问，只需把Access-Control-Allow-Origin:*改为Access-Control-Allow-Origin:允许的域名

例如：response.setHeader(“Access-Control-Allow-Origin”,”http://www.client.com”);

在被请求的Response Header中加入如下代码：

// 指定允许其他域名访问 
response.setHeader("Access-Control-Allow-Origin", "*");
// 响应类型 
response.setHeader("Access-Control-Allow-Methods", "POST");
// 响应头设置 
response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");

cros缺点：
1、此种解决跨域方案，需要浏览器支持H5，因为这是HTML5解决跨域的方式，如果产品面向的是PC端，这种方式可能就不是一个好的解决方案，如果面向的是手机端，此方法不为一个简单、粗暴的好方式。
2、设置*，存在安全隐患。

2.jsonp跨域(不是原生ajax 都是get请求)

jsonp解决跨域问题的原理是，浏览器的script标签是不受同源策略限制的，我们可以在script标签中访问任何域名下的资源文件。利用这一特性，用script标签从服务器中请求数据，同时服务器返回一个带有方法和数据的js代码，请求完成，调用本地的js方法，来完成数据的处理。
比较一下json与jsonp格式的区别：

json格式：

{
     
    "message":"获取成功",
    "state":"1",
    "result":{
     "name":"工作组1","id":1,"description":"11"}
}
jsonp格式：

callback({
     
    "message":"获取成功",
    "state":"1",
    "result":{
     "name":"工作组1","id":1,"description":"11"}
})

从格式来看，jsonp是在json的基础上包装了一个方法名，此方法名是前端请求传过来的，如请求地址为：http://localhost:9999/tookApp/tbk/getItem?callback=JSONP_CALLBACK，那么方法名就是JSONP_CALLBACK。

jsonp的缺点：
1、JSONP是一种非官方的方法，而且这种方法只支持GET方法，不如POST方法安全。（从实现机制就可明白）。
2、JSONP的实现需要服务器配合，如果是访问的是第三方的服务器，我们没有修改服务器的权限，那么这种方式是不可行的。