JSONP解决跨域

发送请求时动态创建一个Script标签，在Script标签中发出请求，通过这种变通的方式实现跨域。非官方协议，而是前后端进行一个约定，约定请求的参数里边必须包含某个参数，比如callback，callback为页面JS函数名，函数参数就是后台需要返回的结果，例如：callback("{\"pass\":true}").

JQUERY发送JSONP请求代码示例：

$.ajax({
	  url:"http://localhost:8080/getData/getSecondData",
	  dataType:"jsonp",
	  jsonp:"callback",
	  success:function(json){
	      console.log(json);
	  }
});

CORS跨域解决方案

CORS解释

CORS是W3C标准，全名叫跨域资源共享Cross-origin resource sharing，允许浏览器向跨域服务器发出 XMLHttpRequest 请求。

简单请求

在做跨域请求资源的时候，会发现多了Origin字段，如下：

Origin: http://www.baidu.com

尝试修改后台代码：

request.addHeader("Access-Control-Allow-Origin","http://www.baidu.com");

此时就可以跨域了

预检命令

非简单请求需要先执行预检命令，因此跨域分为两类：

• 简单请求，先执行请求，后判断

GET、HEAD、POST

• 非简单请求，先发送预检命令

PUT、DELETE、带JSON参数的请求、自定义头的请求

在预检的时候，比如发送JSON，会设置header content-type:application/json，这个header是不被允许的，需要在后台设置：

request.addHeader("Access-Control-Allow-Headers", "Content-Type")

另外，如果要自定义header头，也需要后台设置

携带cookie跨域请求

后台需要设置：

request.addHeader（“Access-Control-Allow-Credentials”,”true”）;

发送请求时，需要设置XMLHttpRequest的withCredentials属性为true

自定义header头的请求

后台需要指定允许自定义头：

request.addHeader("Access-Control-Allow-Headers",headers);