uniapp开发跨域问题的解决办法
什么是跨域
跨域是浏览器的专⽤概念，指js代码访问⾃⼰来源站点之外的站点。⽐如A站点⽹页中的js代码，请求了B站点的数据，就是跨域。
A和B要想被认为是同域，则必须有相同的协议（⽐如http和https就不⾏）、相同域名、和相同端⼝号（port）。
开发时如果前端代码和后端接⼝没有部署在同域服务器，就会被浏览器报跨域。
如果前端要连接传统后台服务器
分部署时的跨域⽅案和调试时的跨域⽅案，具体见下：
1.部署时的跨域解决⽅案
⽅案1：最利索的，当然还是将前端代码和后端接⼝部署在同域的web服务器上
⽅案2：由后台服务器配置策略，设为允许跨域访问。
例如：前端页⾯部署在uniCloud的前端页⾯托管⾥，但是需要访问⾃⼰服务器的接⼝，这时候需要在服务端允许前端页⾯托管的域名跨域访问。不同的服务端框架允许跨域的配置不⼀样，这⾥不再⼀⼀列举仅以eggjs为例。
（1）安装egg-cors包
npm i egg-cors --save
（2）在plugin.js中设置开启cors
enable: true,
package: 'egg-cors',
};
（3）在config.default.js中配置
config.security = {
domainWhiteList: [ '前端⽹页托管的域名' ],
};
2.调试时的跨域解决⽅案
前端⼯程师调试时，运⾏起来的前端代码在uni-app⾃带的web服务器中，⽽不是部署在后台业务服务器上，此时就会遇到跨域。
除了协调后端配置允许跨域，其实也可以⾃⼰解决跨域问题。共3种⽅案可选。
⽅案1 使⽤HBuilderX内置浏览器
这个内置浏览器经过官⽅处理，不存在跨域问题，简单易⽤，推荐使⽤。（需HBuilderX 2.6以上）
chrome浏览器官方在打开页⾯后，点HBuilderX右上⾓的预览，即可打开内部浏览器。或者在运⾏菜单⾥选择运⾏到内置浏览器也可以。
⽅案2 配置webpack-dev-server代理
根据官⽅⽂档的描述，devServer配置被要求在manifest.json去配置，并且由于这个配置⽂件是json格式
的，所以只能对简单类型进⾏配置。但对
于proxy这项配置来说也是⾜够了的。直接如下⽅式配置即可解决:
// manifest.json
{
"h5": {
"devServer": {
"proxy": {
"/prefix/api/user/list": {
"target": "",
"pathRewrite": {
"^/prefix": ""
}
}
}
}
}
}
另⼀种解决⽅案
直接创建⼀个fig.js⽂件，并在⾥⾯配置devServer，直接上代码
// fig.js
devServer: {
proxy: {
'/prefix/api/user/list': {
target: '',
pathRewrite: {
'^/prefix': ''
}
}
},
}
}
这种办法的好处显⽽易见，⽤js⽽⾮json去配置会更加的灵活，需要注意的是以上两种⽅案不能同时使⽤，第⼀种会覆盖第⼆种⽅案。⽅案3 给浏览器安装跨域插件，禁⽌浏览器报跨域
本插件并⾮万能，请仔细阅读与学习浏览器安全策略相关知识，不懂这些知识在评论⾥瞎喷的，官⽅不会回复。
当我们使⽤⾕歌浏览器调试ajax请求的时候可能会遇到这两个问题：
跨域资源共享详见：
跨源读取阻塞详见：
如果仅仅是为了本地预览，可以使⽤Chrome浏览器插件来协助调试。
本插件只能解决简单请求的跨域调试（）。对于⾮简单请求的OPTION预检（）以及线上服务器也有跨域需求的⽤户，可以。Chrome插件名称：Allow-Control-Allow-Origin: *
安装⽅式：
在线安装
使⽤⾕歌浏览器直接打开插件地址安装即可
离线安装
国内⽤户如果⽆法在线安装，可在本页⾯底部下载附件，离线安装
1. 下载得到:
2. 点击浏览器右上⾓的菜单按钮打开⾕歌浏览器的扩展管理页⾯
1. 将下载的扩展插件拖⼊扩展管理页⾯
使⽤⽅式
1. 打开待调试的页⾯
2. 在扩展栏⽬到安装的插件，点击打开插件配置
3. 输⼊想要进⾏跨域调试的接⼝的地址，点击添加即可
注意事项
此插件适合本地调试使⽤，线上部署如果和接⼝不同域还需要服务端配合。
如果实际响应的内容与浏览器预期的内容有差异还可能被策略所阻⽌。
firefox跨域插件

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。