跨域问题详解：浏览器中的跨域概念及其在uni-app中的应用
什么是跨域
跨域是浏览器特有的概念，指的是js代码访问自己源站点以外的站点。例如，A网站网页中的js代码请求B网站的数据，这是跨域的。
如果A和B想要被认为是同一个域，那么它们必须有相同的协议（例如http和B就不行）、相同的域名、相同的端口号（port）。
如果您工作的是App、小程序等非H5平台，则不会涉及跨域问题。
iOS 是一个小例外。在5+ App中，或者uni-app的web-view组件中，也会因为限制而出现跨域问题。另请参阅这方面的专题文章：。 uni-app不在App正常的js代码下运行，不存在跨域问题。
由于uni-app是标准的前后端分离模式，所以在开发h5应用时，如果前端代码和后端接口没有部署在同一个域服务器上，浏览器会报错-领域。
如果前端要连接云功能
在h5页面中，会跨域。此时，您需要在Web控制台中配置域名白名单。白化后的域名可以跨域。详细信息请参见：
另外，内置浏览器在运行过程中不存在跨域的情况。
如果前端想连接传统的后端服务器
有部署时的跨域解决方案，也有调试时的跨域解决方案。详情如下：
部署时的跨域解决方案
例如：前端页面部署在前端页面托管，但需要访问自己服务器的接口。这时服务器需要允许前端页面托管的域名进行跨域访问。不同的服务器端框架允许不同的跨域配置。这里我就不一一列举了，只是作为例子。
(1)安装egg-cors包
npm i egg-cors --save
(2).js中设置cors
exports.cors = { enable: true, package: 'egg-cors', };
(3)..js中配置
config.security = { domainWhiteList: [ '前端网页托管的域名' ], };
调试时的跨域解决方案
前端工程师调试时，运行的前端代码是在uni-app自带的web服务器中，而不是部署在后端业务服务器上。这时候就会遇到跨域的情况。
除了协调后端配置允许跨域问题之外，实际上你可以自己解决跨域问题。共有 3 个选项可用。
选项 1 使用内置浏览器
此内置浏览器已经过官方处理，不存在跨域问题。它简单易用，值得推荐。 （需要2.6或以上）
打开页面后，点击右上角的预览，打开内部浏览器。或者您可以在运行菜单中选择运行到内置浏览器。
选项 2 配置开发代理
下面是比uni官网文档更详细的配置指南，这里直接贴地址：
方案三：给浏览器安装跨域插件，禁止浏览器报跨域
这个插件并不是万能的。请您仔细阅读并了解浏览器安全策略的相关知识。如果您不懂这些知识并在评论中留言，官方不会回复。
当我们使用 调试ajax请求时，可能会遇到以下两个问题：
最常见的问题就是跨域资源共享，也就是我们通常所说的跨域。当我们在本地服务器预览页面并使用ajax访问远程服务器的内容时，请求会失败。例如：本地预览地址为：:8080/，访问的接口地址为。
如果只是为了本地预览，可以使用浏览器插件来辅助调试。
！！！该插件只能解决简单请求的跨域调试（点击搜索什么是简单请求）。对于不简单的预检请求（点击搜索什么是预检请求）以及对在线服务器也有跨域需求的用户，服务器可以配合解决问题。
插件名称：---：*安装方法：将下载的扩展插件拖入扩展管理页面
使用方法 打开需要调试的页面，在扩展栏中找到已安装的插件。点击打开插件配置，输入要调试跨域的接口地址。单击“添加”，记下跨域插件。
跨域插件（注意css兼容性问题）
其他历史问题
2.3.0版本在某些情况下可能会报跨域问题，请升级到2.3.1+解决问题。
什么是跨域
跨域是浏览器特有的概念，指的是js代码访问自己源站点以外的站点。例如，A网站网页中的js代码请求B网站的数据，这是跨域的。
如果A和B想要被认为是同一个域，那么它们必须有相同的协议（例如http和B就不行）、相同的域名、相同的端口号（port）。
如果您工作的是App、小程序等非H5平台，则不会涉及跨域问题。
iOS 是一个小例外。在5+ App中，或者uni-app的web-view组件中，也会因为限制而出现跨域问题。另请参阅这方面的专题文章：。 uni-app不在App正常的js代码下运行，不存在跨域问题。
由于uni-app是标准的前后端分离模式，所以在开发h5应用时，如果前端代码和后端接口没有部署在同一个域服务器上，浏览器会报错-领域。
如果前端要连接云功能
在h5页面中，会跨域。此时，您需要在Web控制台中配置域名白名单。白化后的域名可以跨域。详细信息请参见：
另外，内置浏览器在运行过程中不存在跨域的情况。
如果前端想连接传统的后端服务器
有部署时的跨域解决方案，也有调试时的跨域解决方案。详情如下：
部署时的跨域解决方案
例如：前端页面部署在前端页面托管，但需要访问自己服务器的接口。这时服务器需要允许前端页面托管的域名进行跨域访问。不同的服务器端框架允许不同的跨域配置。这里我就不一一列举了，只是作为例子。
(1)安装egg-cors包
npm i egg-cors --save
(2).js中设置cors
exports.cors = { enable: true, package: 'egg-cors', };
(3)..js中配置
config.security = { domainWhiteList: [ '前端网页托管的域名' ], };
调试时的跨域解决方案
前端工程师调试时，运行的前端代码是在uni-app自带的web服务器中，而不是部署在后端业务服务器上。这时候就会遇到跨域的情况。
除了协调后端配置允许跨域问题之外，实际上你可以自己解决跨域问题。共有 3 个选项可用。
选项 1 使用内置浏览器
此内置浏览器已经过官方处理，不存在跨域问题。它简单易用，值得推荐。 （需要2.6或以上）
打开页面后，点击右上角的预览，打开内部浏览器。或者您可以在运行菜单中选择运行到内置浏览器。
选项 2 配置开发代理
下面是比uni官网文档更详细的配置指南，这里直接贴地址：
方案三：给浏览器安装跨域插件，禁止浏览器报跨域
这个插件并不是万能的。请您仔细阅读并了解浏览器安全策略的相关知识。如果您不懂这些知识并在评论中留言，官方不会回复。
当我们使用 调试ajax请求时，可能会遇到以下两个问题：
最常见的问题就是跨域资源共享，也就是我们通常所说的跨域。当我们在本地服务器上预览页面并使用ajax访问远程服务器的内容时，请求会失败。例如：本地预览地址为：:8080/，访问的接口地址为。
如果只是为了本地预览，可以使用浏览器插件来辅助调试。
！！！该插件只能解决简单请求的跨域调试（点击搜索什么是简单请求）。对于不简单的预检请求（点击搜索什么是预检请求）以及对在线服务器也有跨域需求的用户，服务器可以配合解决问题。
插件名称：---：*安装方法：将下载的扩展插件拖入扩展管理页面
使用方法 打开需要调试的页面，在扩展栏中找到已安装的插件。点击打开插件配置，输入要调试跨域的接口地址。单击“添加”，记下跨域插件。
跨域插件（注意css兼容性问题）
其他历史问题
2.3.0版本在某些情况下可能会报告跨域问题。请升级至2.3.1+以解决问题。
什么是跨域
跨域是浏览器特有的概念，指的是js代码访问自己源站点以外的站点。例如，A网站网页中的js代码请求B网站的数据，这是跨域的。
如果A和B想要被认为是同一个域，那么它们必须有相同的协议（例如http和B就不行）、相同的域名、相同的端口号（port）。
如果您工作的是App、小程序等非H5平台，则不会涉及跨域问题。
iOS 是一个小例外。在5+ App中，或者uni-app的web-view组件中，也会因为限制而出现跨域问题。另请参阅这方面的专题文章：。 uni-app不在App正常的js代码下运行，不存在跨域问题。
由于uni-app是标准的前后端分离模式，所以在开发h5应用时，如果前端代码和后端接口没有部署在同一个域服务器上，浏览器会报错-领域。
如果前端要连接云功能
在h5页面中，会跨域。此时，您需要在Web控制台中配置域名白名单。白化后的域名可以跨域。详细信息请参见：
另外，内置浏览器在运行过程中不存在跨域的情况。
如果前端想连接传统的后端服务器
有部署时的跨域解决方案，也有调试时的跨域解决方案。详情如下：
部署时的跨域解决方案
例如：前端页面部署在前端页面托管，但需要访问自己服务器的接口。这时服务器需要允许前端页面托管的域名进行跨域访问。不同的服务器端框架允许不同的跨域配置。这里我就不一一列举了，只是作为例子。
(1)安装egg-cors包
npm i egg-cors --save
(2).js中设置cors
exports.cors = { enable: true, package: 'egg-cors', };
(3)..js中配置
config.security = { domainWhiteList: [ '前端网页托管的域名' ], };
调试时的跨域解决方案
前端工程师调试时，运行的前端代码是在uni-app自带的web服务器中，而不是部署在后端业务服务器上。这时候就会遇到跨域的情况。
除了协调后端配置允许跨域问题之外，实际上你可以自己解决跨域问题。共有 3 个选项可用。
选项 1 使用内置浏览器
此内置浏览器已经过官方处理，不存在跨域问题。它简单易用，值得推荐。 （需要2.6或以上）
打开页面后，点击右上角的预览，打开内部浏览器。或者您可以在运行菜单中选择运行到内置浏览器。
选项 2 配置开发代理
下面是比uni官网文档更详细的配置指南，这里直接贴地址：
方案三：给浏览器安装跨域插件，禁止浏览器报跨域
这个插件并不是万能的。请您仔细阅读并了解浏览器安全策略的相关知识。如果您不懂这些知识并在评论中留言，官方不会回复。
当我们使用 调试ajax请求时，可能会遇到以下两个问题：
最常见的问题就是跨域资源共享，也就是我们通常所说的跨域。当我们在本地服务器上预览页面并使用ajax访问远程服务器的内容时，请求会失败。例如：本地预览地址为：:8080/，访问的接口地址为。
如果只是为了本地预览，可以使用浏览器插件来辅助调试。
！！！该插件只能解决简单请求的跨域调试（点击搜索什么是简单请求）。对于不简单的预检请求（点击搜索什么是预检请求）以及对在线服务器也有跨域需求的用户，服务器可以配合解决问题。
插件名称：---：*安装方法：将下载的扩展插件拖入扩展管理页面
使用方法 打开需要调试的页面，在扩展栏中找到已安装的插件。点击打开插件配置，输入要调试跨域的接口地址。单击“添加”，记下跨域插件。
跨域插件（注意css兼容性问题）
其他历史问题
2.3.0版本在某些情况下可能会报跨域问题，请升级到2.3.1+解决问题。