为什么会产生跨域问题
1、浏览器默认是限制不同域名的xmlhttprequest的访问,对不同的域名的其它请求比如img的src,script的 src都没有限制,服务器端是没有限制跨域问题
##解决方式
根据跨域产生的原因有两个方式
1.用scriptr的方式,这个浏览器不限制,就是JSONP
2.用让浏览器支持xmlhttprequest即xhr的访问,这也访问两种修改方式
2.1调用者修改(发出请求方)
2.2 被调用者修改(接收请求,返回数据)
具体修改方式
JSONP 调用者和被调用者都要修改
- 返回的是javascript的语法格式,是一个函数,content-type是application/javascript
- json 返回的是json对象
- 只支持GET 请求
@.ajax({
url: "http://localhost:9090/student",
type: "GET",
dataType: "jsonp",
success:function(data){
handle(data);
}
});
success方法相当于自动执行了回调函数,只需要在success里面写处理数据就可以了。
调用者修改
- 列表内容
调用者用自己的http服务器做代理,类似forward的方式转到被调用者,浏览器会认为访问的是同一个域名,不会产生跨域的问题
被调用者修改
修改应用服务器
在request里面设置这两个参数,就可以解决跨域的问题:
reuqest.addHeader("Access-Control-Allow-Origin","*");
reuqest.addHeader("Access-Control-Allow-Methods","*");
跨域问题其本解决了
但是如果发送的请求带有json格式的数据时,还需要如下的的代码
reuqest.addHeader("Access-Control-Allow-Headers","Content-Type");
reuqest.addHeader("Access-Control-Max-Age","3600");
如果是带有cookie的跨域请求呢,这样的场景一般就是登陆平台后,平台再301到别的项目,平台需要session支持,否则是需要登陆的,这时候就需要cookie支持的请求了,具体的方式如下
$ajax({
url:"http://www.baidu.com",
type:"get",
xhrFields:{
withCredentials:true
},
success:function(data){
handle(data);
}
});
平台端也需要修改增加如下的header
String origin=reuqst.getHeader("Orgin");
if(!StringUtils.isEmpty(origin)){
reuqest.addHeader("Access-Control-Allow-Origin",origin);
}
reuqest.addHeader("Access-Control-Allow-Credentials","true");
String headers=reuqst.getHeader("Access-Control-Request-Headers");
if(!StringUtils.isEmpty(headers)){
reuqest.addHeader("Access-Control-Request-Headers",headers);
}
修改web服务器
nginx的修改方式
server{
listen 80;
server_name b.com
location /{
proxy_pass http://localhost:8080;
add_header Access-Control-Allow-Method *;
add_header Access-Control-Max-Age 3600;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Origin $http_origin;
add_header Access-Control-Allow-Headers $http_access_control_request_headers;
if ($request_method=OPTIONS){
return 200;
}
}
}
apache的修改方式
<VirtualHost *:80>
SeverName b.com
ProxyPass http://localhost:8080/
#把请求头的rgigin值返回到 Access-Control-Allow-Origin字段
Header always set Access-Control-Allow-Origin "expr=%{req:origin}"
#把清求头的 Access-Control-Request-Headers值返回到 Access-Control-Allow-Headers字
Header always set Access-Control-Allow-Headers "expr=%{req:Access-Control-Request-Headers}
Header always set Access-Control-Allow-Methods "*"
Header always set Access-Control-Allow-Credentials "true"
Header always set Access-Control-Max-Age "3600"
#处理预检命令 OPTIONS,直接返回204
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$"/"[R-2014,L]
</VirtualHost>
spring 注解方式解决
@CrossOrigin(allowCredentials="true")加在controller上面
看的视频地址如下