北京模板建站哪家好,营销平台,做网站的回扣,wordpress绑定多域名什么是跨域
跨域是浏览器受同源#xff08;协议、域名、端口#xff09;策略的限制#xff0c;不允许不同源的站点之间进行某些操作#xff08;如发送ajax请求#xff0c;操作dom#xff0c;读取cookie#xff09;#xff0c;如果不进行特殊配置是不能操作成功的…什么是跨域
跨域是浏览器受同源协议、域名、端口策略的限制不允许不同源的站点之间进行某些操作如发送ajax请求操作dom读取cookie如果不进行特殊配置是不能操作成功的并且控制台会报如下跨域错误 No Access-Control-Allow-Origin header is present on the requested resource. Origin xxxxxx is therefore not allowed access
跨域出现的场景
两个常见的例子 前后端分离的项目联调时客户端和服务端ip不一致 一般前端本地服务启动在localhost:8080上服务端接口部署在联调服务器上此时向联调服务器发送请求的话就会发生跨域 大型项目中可能需要多个服务不同职责的服务部署在不同的端口上甚至多个服务器上 在当前网站页面上请求其他服务器或者其他端口上的接口也会发生跨域这种情况一般通过nginx反向代理解决
跨域解决方案
JSONP
原理利用script标签的src属性不受同源策略的限制并且资源加载完成后会被当作js脚本立即执行的特点来达到跨域请求资源的目的。
需要做一些特殊处理准备一个callback函数用于处理后端传来的数据将callback函数的名字作为src属性中的query传给后端后端收到后用callback函数名将数据包裹起来使数据作为参数返回给前端当资源加载完成callback会立即被调用此时的实参就是我们需要的数据。
var script document.createElement(script);// 传参一个回调函数名给后端方便后端返回时执行这个在前端定义的回调函数
script.src http://www.domain2.com:8080/login?useradmincallbackhandleCallback;
document.head.appendChild(script);// 回调执行函数
function handleCallback(res) {alert(JSON.stringify(res));
}服务端返回如下返回时即执行全局函数
handleCallback({success: true, user: admin})JSONP的优缺点 优点 兼容性好支持老的浏览器 缺点 只支持get请求因为script标签请求资源本质就是一个get请求需要服务端专门配置把数据用callback函数名包裹起来再返回
CORS
CORS是w3c指定的跨域方案支持所有类型的请求兼容性ie不能低于ie 10
CORS跨域方案将所有请求划分为简单请求和非简单请求两类对其分别采用不同的处理方案。
简单请求
同时满足以下两个条件的请求属于简单请求
请求方法是get、 post、 head中的一种http头字段不超出AcceptAccept-LanguageAccept-LanguageContent-Type仅限于text/plain、multipart/form-data、application/x-www-form-urlencoded
简单请求流程
浏览器在请求头中自动加入origin字段origin字段用来说明本次请求来自哪个源协议域名端口服务器根据这个值决定是否同意这次请求。
如果origin指定的源不在许可范围内服务器会返回一个正常的http回应。浏览器发现这个回应的头信息没有包含 Access-Control-Allow-Origin 字段就知道出错了从而抛出一个错误被XMLHttpRequest的onerror回调函数捕获。注意这种错误无法通过状态码识别因为HTTP回应的状态码有可能是200。
如果Origin指定的域名在许可范围内服务器返回的头字段中会包含Access-Control-Allow-Origin它的值要么是请求时Origin字段的值要么是一个*表示接受任意域名的请求。
如何设置cookie
cors请求默认不携带cookie如果想要发送cookie需要服务端和客户端同时设置一方面要服务器同意指定Access-Control-Allow-Credentials: true另一方面开发者必须在ajax请求中打开withCredentials属性。xhr.withCredentials true;
非简单请求
预检请求
非简单请求需要先发出一个预检请求预检请求方法是OPTIONS用来获知服务器是否允许该实际请求。预检请求“的使用可以避免跨域请求对服务器的用户数据产生未预期的影响PUT、delete
请求头字段
OriginAccess-Control-Request-MethodAccess-Control-Request-Headers
预检请求的回应 如果允许跨源请求 Access-Control-Allow-Origin Access-Control-Allow-Methods返回的是所有支持的方法而不单是浏览器请求的那个方法。这是为了避免多次预检请求。 Access-Control-Allow-Headers是一个逗号分隔的字符串表明服务器支持的所有头信息字段不限于浏览器在预检中请求的字段。 Access-Control-Allow-Credentials 如何设置cookie cors请求默认不发送cookie如果想要发送cookie需要服务端和客户端同时设置一方面要服务器同意指定Access-Control-Allow-Credentials: true另一方面开发者必须在AJAX请求中打开withCredentials属性。 Access-Control-Max-Age 该字段可选用来指定本次预检请求的有效期单位为秒。在此期间不用发出另一条预检请求。 如果不允许比如origin不在信任名单内 会返回一个正常的HTTP回应但是没有任何CORS相关的头信息字段。浏览器就会报错
正常请求
一旦服务器通过了预检请求以后每次浏览器正常的CORS请求就都跟简单请求一样会有一个Origin头信息字段。服务器的回应也都会有一个Access-Control-Allow-Origin头信息字段。
反向代理
跨域是浏览器的保护机制如果绕过浏览器使用代理服务器去请求目标服务器上的数据就不会受跨域影响。因此前端可以通过脚手架或webpack配置devSever下的proxy选项将/api开头的请求转发到真实服务器上。
在生产环境下也可以使用nginx配置反向代理来解决跨域。
学习资料点此下载
