产生跨域请求问题的原因
因为在浏览器中有一个同源策略,这是浏览器最基本的安全功能,但是在服务器中不限制。
同源就是指:协议,域名,端口号都相同,任意一个不满足,就触发了同源策略,我们把触发了同源策略的请求叫做跨域请求
1:CORS(Cross-Origin ResourceSharing)
CORS是跨域资源共享,定义了必须在访问跨域资源时,浏览器与服务器应该如何沟通。
CORS的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功还是失败。 目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。
实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。
服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。该属性表示哪些域名可以访问资源,如果设置通配符则表示所有网站都可以访问资源。如果浏览器检测到相应的设置,就可以允许Ajax进行跨域的访问。
//在后端接口中设置
header('Access-Control-Allow-Origin:域名');
//当域名为*时支持所有网站都可以访问资源
2:nginx代理跨域
原理:同源策略只存在在浏览器中,对服务器不限制。
实现思路: 通过nginx配置一个代理服务器(域名与domain1相同,端口不同)做跳板机,反向代理访问domain2接口,并且可以顺便修改cookie中domain信息,方便当前域cookie写入,实现跨域登录。
#proxy服务器
server {
listen 81;
server_name www.domain1.com;
location = /gx {
//正向代理,/gx是代理标识符,当发起请求时相当于url
proxy_pass http://172.0.0.1/text/cors.php;
}
location / {
proxy_pass http://www.domain2.com:8080; #反向代理
proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
index index.html index.htm;
# 当用webpack-dev-server等中间件代理接口访问nignx时,此时无浏览器参与,故没有同源限制,下面的跨域配置可不启用
add_header Access-Control-Allow-Origin http://www.domain1.com; #当前端只跨域不带cookie时,可为*
add_header Access-Control-Allow-Credentials true;
}
}
3:webSocket
webSocket和HTTP都是应用层协议,都属于TCP协议。
webSocket连接是一次特殊的握手(即连接后不断开),与http的keep-alive不同,webSocket是真正的长连接。
webSocket是一种双向通信协议,在建立连接后,webSocket的server与client都能主动向对方发送或接收数据。
WebSocket是一种通信协议,使用ws://(非加密)和wss://(加密)作为协议前缀。
该协议不实行同源策略,只要服务器支持,就可以通过它进行跨域通信。