Uniapp跨域解决方案

一、什么是跨域

在Web开发过程中，当发起跨域请求时，浏览器会根据同源策略(Same-Origin Policy)拦截请求。同源策略要求发起请求的源(协议，域名，端口号)必须与接收请求的源一致，否则会被浏览器拦截。

比如说，当你的uniapp应用运行在一个http://localhost:8080的地址下，而你在应用中发起了请求去访问 http://www.example.com这个源时，由于两个源不一致，请求就会被拦截。

二、为什么uniapp需要跨域解决方案

与其他框架一样，uniapp也需要发起跨域请求。因为如果不使用跨域，则uniapp无法获得跨域目标服务器上的数据。比如你需要通过uniapp向服务器请求一个json数据，但是这个json数据却不在同一个域下。

既然同源策略限制了我们的请求，我们就需要寻找其他的方式来解决这个问题。

三、uniapp跨域解决方案

1. 使用代理

代理是一种常见的跨域解决方案，它的原理是将请求发送给同源服务器，然后由同源服务器转发到目标服务器，目标服务器返回数据后再由同源服务器将数据返回给客户端。

在uniapp中使用代理需要注意以下几点：

1、需要在vue.config.js文件中配置代理

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

2、在接口调用中使用绝对路径

uni.request({
  url: '/api/getData',
  method: 'POST',
  data: {
    name: 'John'
  },
  success: res => {
    console.log(res.data)
  }
})

3、因为使用了代理，所以需要保证同源服务器可以正常访问目标服务器，否则同样无法获得预期结果。

2. 使用jsonp

jsonp也是一种跨域请求的方式，它的原理是在客户端使用script标签动态创建一个 JavaScript 文件，并通过 URL 传参方式来传递数据，该 JavaScript 文件载入成功后会执行回调函数，并且会把数据作为参数传入。

在uniapp中使用jsonp需要注意以下几点：

1、需要在服务端支持jsonp协议，即接口返回格式为callback(data)的格式

2、在请求接口时需要带上callback参数，参数值为回调函数名称

uni.request({
  url: 'http://www.example.com/api/getData',
  data:{
    name: 'John'
  },
  dataType:'jsonp',
  jsonpCallback:'callback',
  success: res => {
    console.log(res.data)
  }
})

3、jsonp的优点是可以兼容旧浏览器，但是它也有一些缺点，比如只能使用GET请求，且不支持异常处理。

3. 使用CORS

在服务端设置CORS(Cross-Origin Resource Sharing)是解决跨域问题的另一种方案。CORS是W3C规范中定义的一种支持跨域访问的方式，它通过在服务端响应头中加入Access-Control-Allow-*系列的头部信息，来告诉浏览器允许跨域请求。

开启CORS需要服务端支持，然后我们可以在uniapp中简单地发起跨域请求：

uni.request({
  url: 'http://www.example.com/api/getData',
  method: 'POST',
  data: {
    name: 'John'
  },
  header: {
    'content-type': 'application/json'
  },
  success: res => {
    console.log(res.data)
  }
})

四、总结

以上就是uniapp中常见的跨域解决方案。每种方式都有它自己的特点和适用场景，选择合适的方式可以使我们顺利地解决跨域问题，获得预期结果。