目录

1、前言

2、同源策略

3、跨源数据存储访问

4、浏览器跨域设置

4.1 版本号（49.x.x.x.x）之前的跨域设置

4.2 版本号（49.x.x.x.x）之后的跨域设置

5、批处理跨域设置

5.1 windows 操作系统。

5.2 Mac 操作系统

---

1、前言

在我们进行前端开发的时候，我们请求的后端的接口可能是在不同的域名之下，就会产生跨域的问题，跨域是浏览器本身从安全策略（同源策略）考虑的，默认会限制跨域的请求，因为使用不当，可能会导致一些安全问题，包括用户隐私数据的泄露，而在实际开发中，我们可能需要有跨域的需求，那么从前端的角度怎么去解决呢？

2、同源策略

同源策略是一个重要的安全策略，它用于限制一个源的文档或者它加载的脚本如何能与另一个源的资源进行交互。

它能帮助阻隔恶意文档，减少可能被攻击的媒介。例如，它可以防止互联网上的恶意网站在浏览器中运行 JS 脚本，从第三方网络邮件服务（用户已登录）或公司内网（因没有公共 IP 地址而受到保护，不会被攻击者直接访问）读取数据，并将这些数据转发给攻击者。

同源的定义：

如果两个 URL 的协议、端口（如果有指定的话）和域名都相同的话，则这两个 URL 是同源的。

下面给出了与以下URL的源进行对比的示例：百度安全验证https://mbd.baidu.com/newspage/data/landingsuper?context=%7B%22nid%22%3A%22news_9477925471385309700%22%7D&n_type=-1&p_from=-1

URL是否同源原因https://www.baidu.com否域名不同https://mbd.baaidu.com/other/aaa是三者相同，只是路径不同http://www.baidu.com否协议不同https://mbd.baaidu.com:8081/other/aaa否端口不一样

3、跨源数据存储访问

访问存储在浏览器中的数据，如 Web Storage和  IndexDB ，是以源进行分割的。每个源都拥有自己单独的存储空间，一个源中的 JavaScript 脚本不能对属于其他源的数据进行读写操作。

Cookie 使用不同的源定义方式。一个页面可以为本域和其父域设置 cookie，只要是父域不是公共后缀（public suffix）即可。Firefox 和 Chrome 使用 Public Suffix List 检测一个域是否是公共后缀。当你设置 cookie 时，你可以使用 Domain、Path、Secure 和 HttpOnly 标记来限定可访问性。当你读取 cookie 时，你无法知道它是在哪里被设置的。即使只使用安全的 https 连接，你所看到的任何 cookie 都有可能是使用不安全的连接进行设置的。

4、浏览器跨域设置

这里讲解的默认浏览器为chome 浏览器。

4.1 版本号（49.x.x.x.x）之前的跨域设置

操作步骤如下：

1、在桌面找到chrome 浏览器图标，右键，属性标签页中。

2、在目标输入框中加上 --disable-web-security即可。

然后双击打开测试下，如下图所示，则为添加成功。

​​ 

4.2 版本号（49.x.x.x.x）之后的跨域设置

对于49之后的版本，需要指定在跨域的时候，对应用户的数据需要进行指定。主要是为了在跨域的时候用户隐私数据的安全，所以进行指定。 

操作步骤如下：

1、新建一个目录，例如：C:chrome_data

2、在桌面找到chrome 浏览器图标，右键，属性标签页中。

3、在目标输入框中加上 --disable-web-security --user-data-dir=C:chrome_data即可。

然后双击打开测试下，如下图所示，则为添加成功。

​

5、批处理跨域设置

如果我们不想每次打开浏览器都是跨域打开，而只是在开发项目中使用，我们可以写一个批处理，双击运行就会打开一个已设置跨域的浏览器。而这样我们就不需要改变浏览器属性标签页中的参数，写在批处理中即可。

5.1 windows 操作系统。

假设chrome 的安装路径为 C:Program Files (x86)GoogleChromeApplicationchrome.exe

新建一个文件名为 chrome_cross.bat，文件内容如下所示：

Start /d "C:Program Files (x86)GoogleChromeApplication" chrome.exe --disable-web-security --user-data-dir=C:chrome_data

测试：双击点击“chrome_cross.bat”文件，如下所示，即为成功：

​

5.2 Mac 操作系统

假设chrome的安装路径为 /Applications/Google/Chrome.app

新建一个文件名为：chrome.command，文件内容如下所示：

open -n /Applications/Google Chrome.app/ --args --disable-web-security  --user-data-dir=/Users/jiang/Documents/chromeTempCross

 测试：双击点击“chrome_cross.bat”文件，如下所示，即为成功：

​

Tips：这只是在开发中的一种临时方案，也是最简单的一种方式，当然还有其他方式也可解决，所示在实际开发中，我们还是需要有web安全的这种意识。