uniapp跨域问题（实例详解）

为什么会存在跨域问题？

由于浏览器的同源策略导致的，是浏览器的一种安全保护机制。

浏览器从一个域名的网页去请求另一个域名的资源时，协议、域名、端口 任一不同，都是跨域

解决uniapp的跨域问题有很多方式，下面总结一下常用的几种方式

1. 使用 jsonp，可在我们封装的网络通讯中添加

dataType:'jsonp'

总结：

但是此种方式仅支持 get 请求，post好像用不了。

具体可参考：https://www.imooc.com/article/291931

2. 在uniapp根目录下的 manifest.json 添加

"h5": {
    "devServer": {
        "proxy": {
            "/8888": {
                "target": ,
                "changeOrigin": true,
                "pathRewrite": {
                    "^/8888": "/"
                }
            },
            "/8800": {
                "target": ,
                "changeOrigin": true,
                "pathRewrite": {
                   "^/8800": ""
               }
            }
        }
    }},

总结：

此种方式虽然没有其它方式灵活，但是 是最适用于uniapp的，毕竟是官方提供的配置文件。

具体参照：https://uniapp.dcloud.io/collocation/manifest?id=h5

3. uniapp根目录下新建文件 vue.config.js ,然后在里面添加

module.exports = {
  devServer: {
    proxy: {
      '/dev': {
        target: 'https://www.baidu.com/api',
        changeOrigin: true,
        pathRewrite: {
          '^/dev': ''
        }
      }
    },
  }}

总结：

此种配置方式，可能会没用，因为 vue.config.js 是 vue3 才有的， vue2 配置 vue.config.js 是无效的。可以在 manifest.json 文件内通过 vueVersion 字段来查看 vue 版本。如下图：

具体参照：https://cli.vuejs.org/zh/config/#devserver-proxy

如果是 vue2 配置跨域，可参照 ：https://www.ysext.com/articleinfo/1022.html

4. 解除Google浏览器的跨域限制

TASKKILL /F /IM chrome.exe

start chrome.exe --args --disable-web-security --user-data-dir

pause

总结：

记得重启浏览器

具体参照：解决chrome阻止跨域方式

在命令行执行命令：

TASKKILL /F /IM chrome.exe
start chrome.exe --args --disable-web-security --user-data-dir
pause

很多情况都会造成开发人员开发项目与服务器不在同一个环境的情况，这时本地的项目代码请求不到服务器的数据，准确地说是请求到数据，但是并没有走success的回调函数，而是在error里。

很明显这是跨域了，由于http同源策略不允许跨域请求数据，正常情况下不能有这种情况的发生，但是真的有这种需求该怎么办呢。

最经典的恐怕就是jsonp方法了，ajax以jsonp方式请求数据，服务端返回的数据带一个callback函数，具体实现跨域请求的原理很巧妙，但是今天并不是讲这种方法的。这种情况需要后端人员配合前端开发者实现，适用于公司项目与服务器由于种种原因分开的情况。但是今天要解决的是开发者自己要在公司外调试代码的情况，临时救急快速进入可开发状态，上面的方法可以帮助前端开发人员通过chrome调试程序时临时实现跨域请求数据。

5. 其它方式

(1). 直接运行在 hbuilderx 的内置浏览器内，uniapp官方在内置浏览器内做过跨域处理

(2). 下载Google浏览器一个可支持跨域的拓展程序：https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi