前后端分离的浏览器跨域问题

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盘下面建立一个就是了。

顺利解决跨域问题，这样还不会妨害到我以前谷歌浏览器中的书签一类。