当前位置: 首页 > Web前端 > JavaScript

跨域

时间:2023-03-26 21:45:28 JavaScript

cross-domain什么是跨域和跨域,主要是由于不符合浏览器同源策略的一种现象。同源策略是浏览器的一种安全策略,其要求是请求资源的协议、域名、端口号与当前页面完全一致。目的是保护本地数据不被请求的数据污染。如果缺少同源策略,浏览器就容易受到XSS、CSRF等攻击。所以同源策略拦截了请求返回的数据,也就是服务器响应了,但是响应的结果被浏览器拦截了。浏览器采用同源策略,禁止页面在未经明确授权的情况下加载或执行来自与自身不同源的任何脚本。受同源策略限制的cookies、localStorage、indexDB等存储内容。Cookie只与域名和路径相关联,而localStorage是逐源管理的。禁止对不同源页面的DOM进行独立操作。主要场景是iframe跨域ajax请求前后端分离,允许跨域加载资源标签支持get请求,使用script标签获取跨域资源。跨域标签包括img、link、iframe、script等具体操作:服务端响应内容为js代码,返回函数调用,传入参数,浏览器解析并执行这个代码,相应的函数声明由前端自己定义。CORS(Cross-OriginResourceSharing)跨源资源共享是一种基于HTTP头的机制,允许浏览器通过允许服务器识别除其他来源(域、协议和端口)之外的其他来源(域、协议和端口)来允许这些来源访问和加载。本身。自己的资源。该机制增加了一组新的HTTP头字段(headers)来解决跨域问题,让服务器声明哪些源站有权限通过浏览器访问哪些资源。该方法主要需要后端接口进行处理,使响应报文中包含正确的CORS响应头,如:response.setHeader('Access-Control-Allow-Origin','*');//允许请求源响应。setHeader('Access-Control-Allow-Headers','*');//允许的头信息用于预检请求的响应response.setHeader('Access-Control-Allow-Methods','*');//允许的请求类型,预检请求的响应response.setHeader('Access-Control-Expose-Headers','token');//允许浏览器获取自定义响应头来跨域代理前端本地开发通常采用这种跨域方案。比如在使用Webpack作为构建工具时,可以配置devServer.proxy作为代理,让符合特定规则的请求转发到真实的接口地址,相当于给真实的接口做了一层代理。module.exports={//...devServer:{proxy:{'/api':{target:'http://www.example.com',pathRewrite:{'^/api':''}}}}};假设在http://localhost:8080/index.html的页面A发起请求http://localhost:8080/api/getList,该请求实际上会转发到http://www.example。com/获取列表