浏览器出于安全考虑存在同源策略。只有协议,域名,端口都一致,即同源才能访问另一个源的资源。同源策略阻止的是跨域资源的获取,而不是阻止跨域的请求,请求可以正常发出,但返回的内容被阻止。
跨域请求的方式:
1.JSONP的方式
利用script标签没有跨域的限制。
通过对src设置请求地址并设置callback参数。
服务器端要根据callback返回一个函数调用。把数据插入函数。
var jsonp = function (url, data, callback) { var dataString = url.indexof("?") == -1 ? "?" : '&'; for (var key in data) { dataString += key + '=' + data[key] + '&' } var funcName = 'json_' + Math.random().toString().replace('.', ','); dataString += 'callback=' + funcName; var scriptEle = document.createElement('script'); scriptEle.src = url + dataString; window[funcName] = function (data) { callback(data); document.body.removeChild(scriptEle); } document.body.appendChild(scriptEle); }
2.CORS
后端设置响应头中的
Access-Control-Allow-Origin值是运训跨域的源网站地址
浏览器判断是否一致,进行响应。
3.nginx反向代理
反向代理就是在我们和真实的服务器之间有一台代理服务器,隐藏了真实的服务端,我们所有的请求都是通过它来进行转接的,只需要知道反向代理服务器是谁就好了。(正向代理隐藏了真实的客户端。反向代理隐藏了真实的服务器。)
4.websocket
WebSocket是一种通信协议,可在单个TCP连接上进行全双工通信。WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。
https://zhuanlan.zhihu.com/p/74326818