网站底部悬浮代码,注册入口,logo网站设计素材,wordpress插件证书认证网站前言 #xff1a;绿蚁新醅酒#xff0c;红泥小火炉 第一#xff1a;前端跨域#xff08;粗谈概念#xff09;
1. 疑惑
当前端请求后端接口不通#xff0c;浏览器控制台出现类似信息#xff0c;则需要解决跨域 Access to XMLHttpRequest at ‘http://47.100.214.160:10… 前言 绿蚁新醅酒红泥小火炉 第一前端跨域粗谈概念
1. 疑惑
当前端请求后端接口不通浏览器控制台出现类似信息则需要解决跨域 Access to XMLHttpRequest at ‘http://47.100.214.160:10086/api/select’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource…
2. 解决
解决跨域方式前端方式一本地设置代理或者nginx上配置、后端方式通过注解或配置【有些后端人员会反驳你接口在postman上访问是有数据没问题的因为postman上不会有限制只有浏览器访问才有同源策略的限制】
3. 同源策略
什么是浏览器的同源策略浏览器的同源策略的限制约束通信双方必须满足同协议、同域名、同端口三者一致才能进行通信访问 举例分析 http://47.100.214.160:10086 http://localhost:8080 协议httphttp 、域名47.100.214.160≠localhost、端口10086≠8080 注这里的47.100.214.160 是IP这个IP会有映射的域名而这里的lacalhost就是本机域名所以二者不可能相等 在浏览器上通信必须同时满足协议、域名、IP三者一致才可以 第二跨域解决开发、生产环境 1.本地配置代理webpack的配置在项目根目录创建代理文件将请求转发到后端服务器例如angular中的proxy.conf.json、vue中的vue.config.js 2.反向代理通过Nginx等反向代理服务器来转发请求客户端与代理服务器通信代理服务器再与目标服务器通信从而绕过同源策略 3.CORS跨域资源共享策略在服务器端设置合适的CORS响应头允许指定源进行跨域请求服务器在响应中附加Access-Control-Allow-Origin头指定允许访问的域后端人员配置。 4.iframe标签1. 使用 document.domain 和 iframe的方式是一种简单【开发环境】跨域方法而且在同一顶级域名下的子域之间进行跨域通信缺陷如果域名不同浏览器会阻止跨域请求通信并且iframe中的页面无法访问对方的DOM对象。2. 使用postMessage方法来实现【生产环境】跨域通信。postMessage允许不同源的窗口进行安全的跨域通信 5.websocketwebsocket协议自带跨域功能不受同源策略限制因此可以轻松地在不同域的页面间进行通信如果单纯就这样就好了… 虽然WebSocket协议本身不受同源策略限制但在建立连接时需要通过HTTP握手过程浏览器和服务器建立连接是通过http请求和响应完成的而这个过程会受到浏览器同源策略的限制然后~ 又回到跨域问题… 补充说明 在项目开发中解决跨域时注意区分开发、生产环境在不同环境下虽然都是一个东西但是两种写法 这里第4点以举例iframe标签在开发环境设置document.domain来实现跨域、在生产环境使用另一种… 第5点websocket跨域也是开发、生产环境用法不一样的此处省略…
