如何解决uniapp跨域问题

一、什么是uniapp跨域问题

1、跨域是浏览器为了防止CSRF攻击，而采用的一种安全机制，同源作用域下的页面之间，由于JavaScript的访问限制，不能进行非同源的互操作。

2、如果你的uniapp应用需要访问不同源的接口（例如访问RESTful API获取数据），由于跨域机制的限制，uniapp应用是无法直接访问这些接口的，这就是uniapp跨域问题。

二、uniapp跨域解决方案

方案1：在服务端实现跨域

1、在服务端实现跨域，是解决跨域问题最为简单直接的方式。在服务端（例如Node.js）中设置Access-Control-Allow-Origin头，可以允许所有域名的请求访问接口。

2、以Node.js为例，实现跨域的代码示例如下：

  
    const http = require('http');
    const server = http.createServer(function(req,res){
        res.setHeader('Access-Control-Allow-Origin','*');
        res.writeHead(200,{'Content-Type':'text/html'});
        res.write('Hello World!');
        res.end();
    });
    server.listen(3000);
  

方案2：使用JSONP技术

1、JSONP（JSON with Padding）是一种跨域访问数据的方式，由于浏览器对于script标签的访问是没有跨域限制的，因此JSONP利用script标签来访问跨域接口，然后通过服务端动态生成JavaScript代码返回数据，从而实现跨域访问数据的目的。

2、以uniapp中使用JSONP访问跨域接口的代码示例如下：

  
    import jsonp from 'jsonp';
 
    jsonp('http://api.example.com', null, function (err, data) {
      if (err) {
        console.error(err);
      } else {
        console.log(data);
      }
    });
  

方案3：使用uniapp内置的网络请求API

1、uniapp本身提供了一套网络请求API，可以很方便地在uniapp中访问不同源的接口。由于uniapp底层已经对HTTP请求做了同源策略解决，因此使用这套API就可以不必担心跨域问题了。

2、代码示例如下：

  
    this.$http.get('http://api.example.com').then((response) => {
      console.log(response.data);
    }).catch((error) => {
      console.log(error);
    });
  

三、总结

1、在uniapp中访问不同源的接口，会遇到跨域问题。

2、解决uniapp跨域问题的方案包括：在服务端实现跨域、使用JSONP技术、使用uniapp内置的网络请求API。