uniApp跨域问题怎么解决？

UniApp面试题 8月前 0 1.1K

在开发 uni-app 应用时，跨域问题通常出现在使用 uni.request 等 API 进行网络请求时，尤其是在开发阶段对本地服务器或第三方API的请求。跨域是浏览器安全策略的一部分，不允许一个域下的文档或脚本请求另一个域下的资源。而在 uni-app 开发的小程序或App中，跨域策略不受浏览器同源策略限制，因此跨域问题主要出现在H5平台上。以下是解决跨域问题的几种方法：

1. 服务器端设置CORS（推荐）

跨源资源共享（CORS）是最推荐的解决跨域问题的方式。通过在服务器端添加适当的CORS头部，服务器可以明确告知浏览器哪些域名（网站）被允许访问该服务器的资源。

例如，如果你的uni-app前端运行在http://localhost:8080，而API服务器运行在http://api.example.com，服务器端需要添加以下HTTP头部：

Access-Control-Allow-Origin: http://localhost:8080
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: X-Requested-With, Content-Type

2. 使用代理

在开发环境中，可以通过配置开发服务器的代理来解决跨域问题。在 vue.config.js 文件中配置代理：

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

这样，当你在 uni-app 项目中请求 /api/data 时，请求会被代理到 http://api.example.com/data，从而绕过浏览器的跨域限制。

3. JSONP

对于只需进行GET请求的简单跨域请求，可以使用 JSONP。这种方法不安全且现在较少使用，但对于一些老的API可能还是需要的。需要服务器支持JSONP响应。

4. 使用第三方服务

一些第三方服务可以作为请求的中间代理，将请求发送到这些服务，然后由它们转发到最终的API服务器。这种方法可能涉及到安全和隐私问题，使用时需要谨慎。

注意：

对于小程序和App等非Web平台，通常不会遇到跨域问题，因为它们不受浏览器同源策略的限制。
如果你对服务器端不够熟悉或没有权限修改服务器配置，推荐在开发阶段使用代理的方式解决跨域问题。
生产环境中应优先考虑在服务器端配置CORS。