跨域问题及部分解决方案

跨域是指跨过浏览器的同源策略去进行请求资源，就叫做跨域。 同源是什么？协议，端口，域名都是相同就是同源。 # 跨域问题解决 跨域原理：同源策略是浏览器的安全策略，不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不需要同源策略，也就不存在跨越问题。 ## Jsonp（只接受get请求） 首先要知道，我们通过href src所请求下来的, js脚本, css文件, 或者image图片文件, 视频文件, 都不存在跨域问题。而ajax请求就会存在跨域问题. Jsonp是一个非正式传输协议，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。 通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。 ## Nginx代理 通过nginx配置一个代理服务器（域名与demo1相同，端口不同）做跳板机，反向代理访问demo2接口，并且可以顺便修改cookie中demo信息，方便当前域cookie写入，实现跨域登录。反向代理的原理就是将前端的地址和后端的地址用nginx转发到同一个地址下，如5500端口和3000端口都转到3003端口下, 也可以解决跨域问题. ## CROS（跨域资源共享） cros是一个系统，它由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应。 同源安全策略默认阻止“跨域”获取资源。但是 CORS 给了web服务器这样的权限，即服务器可以选择，允许跨域请求访问到它们的资源。 普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置 若要带cookie请求：前后端都需要设置。 ## Websocket Websocket是HTML5的一个持久化协议，实现了浏览器与服务器的全双工通信，简单来说，就是在建立连接之后，server 与 client 都能主动向对方发送或接收数据 。(同源策略对web sockets不适用) web sockets原理：在JS创建了web socket之后，会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后，建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。