带你搞懂uniapp跨域问题实例详解

一、什么是跨域 跨域是指在同一源的情况下，无法直接访问其他源的内容，这样的访问被禁止。同一源的概念是协议、域名、端口号均相同。跨域访问的产生是浏览器对JavaScript的限制，出于安全考虑，浏览器禁止页面从一个域的脚本访问另一个域的内容。 二、uniapp跨域问题说明 uniapp是一种跨平台开发方案，支持多种开发平台，如微信、支付宝、H5、APP等。其本质上是基于Vue开发的，同时也继承了Vue的一些特性，其中就包括跨域请求的问题。 uniapp在进行跨域访问时，需要注意以下几个方面： 1.要在manifest.json文件中配置域名白名单，这样才能保证跨域请求的正常进行。 2.使用uni.request发起跨域请求时，需要在请求头中添加cookie和userAgent等信息。 3.需要在服务器端进行CORS（跨域资源共享）配置，以允许其他域名的请求。 三、uniapp跨域问题解决方案 1.在manifest.json中配置白名单 在uniapp工程的manifest.json文件中，可以配置跨域请求的白名单，让uniapp能够正常请求其他域的资源。具体配置方法如下：

{
  "mp-weixin": {
    "permission": {
      "scope.userLocation": {
        "desc": "你的位置信息将用于小程序位置接口的效果展示"
      }
    },
    "appid": "wx409d0c0e311e6497",
    "origin": "https://api.juheapi.com",// 在这里配置跨域请求的域名
    "plugins": {
      "myPlugin": {
        "version": "1.0.0",
        "provider": "wxidxxxxxxxxxxxxxxxxx"
      }
    }
  }
}

在上述代码中，我们将跨域请求所需要的域名添加在了origin中，这样就可以在uniapp中进行跨域访问了。 2.在请求头中添加cookie和userAgent 由于uniapp是基于Vue开发的，因此发送跨域请求时需要在请求头中添加cookie和userAgent等信息，以便服务器端正确处理请求。在实际开发中，我们可以在uni.request中添加以下代码：

uni.request({
    url: 'http://xxx.com/api/xxx',
    method: 'GET',
    header: {
        'content-type': 'application/json',
        'cookie': uni.getStorageSync('cookie') // 从本地缓存中获取cookie信息
        'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3'
    },
    success: res => {
        console.log(res.data)
    },
    fail: err => {
        console.log(err)
    }
})

在上述代码中，我们添加了cookie和userAgent，其中cookie信息从本地缓存中获取。 3.在服务器端进行CORS配置 CORS（跨域资源共享）是一种机制，允许跨域访问服务器资源。在服务器端进行CORS配置后，可以实现其他域名的请求。具体配置方法如下：

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE"
Header set Access-Control-Allow-Headers "Authorization, X-Requested-With, Content-Type, Accept"

在上述代码中，我们添加了Access-Control-Allow-Origin、Access-Control-Allow-Methods和Access-Control-Allow-Headers等信息，这就可以允许其他域名进行跨域请求。 四、总结 通过对uniapp跨域问题的学习和实践，我们了解到了跨域请求的概念和常见解决方案。在实际开发中，我们需要在manifest.json中配置域名白名单，在请求头中添加cookie和userAgent等信息，在服务器端进行CORS配置，以实现跨域请求。同时，也需要注意跨域请求所涉及的安全问题，以保障系统的安全稳定性。