详细说明如何解决vue开发请求数据的跨域问题(基于浏览器的配置解决方案)

使用vue进行前端开发时，由于我们通常运行vue使用的webpack的节点服务，实际使用的数据在后台服务器上，这就涉及到跨域服务器请求的问题。最初在网络请求参数(如axios)中配置

如果Credentials:为true，则可以解决跨域问题，但现在chorme等浏览器做出了新的跨域限制。例如，服务器端配置允许跨域。详见跨域问题解决。它是英文的，似乎需要一些努力；有没有办法解决浏览器没有服务器端配置的跨域问题？答案肯定是肯定的！

这里先说chorme，因为chorme基本上是一个前端主流浏览器，配置方法如下：

版本号49之前的跨域设置

具体做法如下：

1.下载安装chorme浏览器后，在桌面找到浏览器快捷图标，点击鼠标右键的属性列。

2.如下图所示，在属性页的目标输入框中添加-禁用-web-security:

3.单击应用和确定关闭属性页并打开浏览器。如果浏览器提示“您正在使用不支持的命令标记-禁用-网络安全”，则配置成功。

版本号49之后的Chrome跨域设置

chrome版本升级到49后，跨域设置比以前更严格。在open命令中添加-disable-web-security后，需要一个新的用户个人信息目录。众所周知，chrome是一款需要用gmail地址登录的浏览器。登录后会生成一个存储个人信息的目录，保存用户收藏、历史记录等个人信息。49版以后，如果chrome浏览器设置为支持跨域模式，需要指定个人信息目录，而不是使用默认目录。估计chrome浏览器怕用户使用跨域模式泄露个人信息(主要是cookie，很多网站的登录令牌信息都存储在cookie中)。

具体做法如下：

1.在计算机上创建一个新目录，例如：C:\MyChromeDevUserData

2.属性页的目标输入框中的add-disable-web-security-user-data-dir=c : \ mychromedevuserdata，并且-user-data-dir的值是新创建的目录。

3.单击应用和确定关闭属性页并打开浏览器。

再次打开chrome，发现一个与“-disable-web-security”相关的提示，表示chrome可以再次跨域正常工作。

成功跨域后，主页改为谷歌的欢迎页面，原有的收藏链接和历史记录都没有了，而与个人信息相关的新文件则在目录C:\MyChromeDevUserData中生成。

这解决了以下问题

填了一个坑，后面还有很多坑要填，哈哈！

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。