前后端分离的浏览器跨域问题
2019-08-12 20:39
183 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_40903237/article/details/99333764
1、我们首先要知道为什么要跨域?
实际上是因为浏览器的同源策略规定某域下的客户端在没明确授权的情况下,不能读写另一个域的资源。而在实际开发中,前后端常常是相互分离的,并且前后端的项目部署也常常不在一个服务器内或者在一个服务器的不同端口下。如果我们再前端想要获取后端的数据,再发送请求的时候我们如果不做一些处理,就会受到浏览器同源策略的限制。这个时候后端可以收到请求并返回数据,但是前端却无法收到数据。
2、跨域的不同目的
- 2.1 前端为了获取后端的数据时候要跨域
- 2.2 为不同域下的前端页面通信而跨域
3、解决跨域的几种方法
3.1 其中的CORS是一个跨域资源共享方案,为了解决跨域问题,我们自己可以通过增加一系列请求头和响应头,规范安全地进行跨域的数据传输和响应 。
3.2 Request Header
请求头 解释 Origin Origin头在跨域请求或预先请求中,标明发起跨域请求的源域名。 Access-Control-Request-Method Access-Control-Request-Method头用于表明跨域请求使用的实际HTTP方法 Access-Control-Request-Headers Access-Control-Request-Headers用于在预先请求时,告知服务器要发起的跨域请求中会携带的请求头信息 with-credentials 跨域请求携带cookie Response Header
响应头 解释 Access-Control-Allow-Origin Access-Control-Allow-Origin头中携带了服务器端验证后的允许的跨域请求域名,可以是一个具体的域名或是一个*(表示任意域名)。 Access-Control-Expose-Headers Access-Control-Expose-Headers头用于允许返回给跨域请求的响应头列表,在列表中的响应头的内容,才可以被浏览器访问。 Access-Control-Max-Age Access-Control-Max-Age用于告知浏览器可以将预先检查请求返回结果缓存的时间,在缓存有效期内,浏览器会使用缓存的预先检查结果判断是否发送跨域请求。 Access-Control-Allow-Methods Access-Control-Allow-Methods用于告知浏览器可以在实际发送跨域请求时,可以支持的请求方法,可以是一个具体的方法列表或是一个*(表示任意方法)。
3.3 如何使用:
- 我们在客户端需要按照一定的规范进行响应头的设置。
- 那么服务端需要按规范识别并返回对应响应头,或者安装相应插件,一定情况下需要去修改相应框架配置文件。
4、今天我在公司遇到的一个跨域问题
4.1 就是我自己和前端把接口开发完了,前端那边已经调试好了,剩下我自己想要去访问前端的那个页面进行测试接口,但是使用谷歌浏览器的时候出现网络连接的问题,我首先想到会不会存在跨域问题,所以我自己直接复制出来一个谷歌浏览器快捷方式。
4.2 通过在右击谷歌浏览器->属性->目标 里面加了一段--disable-web-security --user-data-dir="C:\MyChromeDevUserData",其中这个MyChromeDevUserData文件夹在c盘下面建立一个就是了。
顺利解决跨域问题,这样还不会妨害到我以前谷歌浏览器中的书签一类。
相关文章推荐
- 前后端分离中浏览器请求跨域的headers取不到值的问题
- vue项目前后端分离开发中遇到的跨域问题以及解决方式
- spring-boot前后端分离跨域问题的解决,主要是使用cors
- 前后端分离,spring boot跨域问题
- vue2 前后端分离项目ajax跨域session问题解决
- 前后端分离 跨域问题解决
- 前后端分离跨域问题解决方案
- vue+springboot前后端分离实现单点登录跨域问题解决方法
- Spring Cloud项目前后端分离跨域问题解决
- vue前后端分离使用fetch 跨域请求时 session失效问题解决
- 前后端分离 跨域问题解决
- 前后端分离:利用nginx的rewrite解决跨域问题
- springboot使用Filter解决前后端分离,产生的跨域问题
- springboot整合shiro-spring-boot-web-starter实现前后端分离的跨域问题
- 前后端分离项目跨域问题分析及解决思路
- 前后端分离跨域 关于前后端分离开发环境下的跨域访问问题(angular proxy=>nginx )
- Ueditor前后端分离单图和多图上传跨域问题遇到的坑----笔记
- 前后端分离nginx配置,同时解决跨域问题
- java 前后端分离跨域问题
- java 前后端分离,跨域问题及获取响应头信息