您的位置:首页 > 新闻 > 资讯 > 深圳市启创网络科技有限公司_百度六安分公司_营销qq下载_郑州seo网络推广

深圳市启创网络科技有限公司_百度六安分公司_营销qq下载_郑州seo网络推广

2024/12/6 14:18:04 来源:https://blog.csdn.net/qq_41930094/article/details/143698335  浏览:    关键词:深圳市启创网络科技有限公司_百度六安分公司_营销qq下载_郑州seo网络推广
深圳市启创网络科技有限公司_百度六安分公司_营销qq下载_郑州seo网络推广

前言 :绿蚁新醅酒,红泥小火炉

第一:前端跨域(粗谈概念)

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
协议:http=http 、域名: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.websocket:websocket协议自带跨域功能,不受同源策略限制,因此可以轻松地在不同域的页面间进行通信,如果单纯就这样就好了…( 虽然WebSocket协议本身不受同源策略限制,但在建立连接时需要通过HTTP握手过程(浏览器和服务器建立连接,是通过http请求和响应完成的),而这个过程会受到浏览器同源策略的限制,然后~ 又回到跨域问题…)

补充说明:
在项目开发中,解决跨域时注意区分开发、生产环境,在不同环境下虽然都是一个东西,但是两种写法!!!
这里,第4点以举例,iframe标签在开发环境设置document.domain来实现跨域、在生产环境使用另一种…
第5点,websocket跨域也是开发、生产环境用法不一样的,此处省略…

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com