uni-app 3.99正式版内置浏览器不支持跨域问题

在 uni-app 3.99 正式版中，内置浏览器（通常是基于 WebView 或 X5 内核）可能会遇到跨域问题，尤其是在开发调试阶段。跨域问题通常是由于浏览器的同源策略（Same-Origin Policy）导致的，该策略限制了从一个源加载的文档或脚本如何与另一个源的资源进行交互。

解决方案

以下是一些常见的解决方案，可以帮助你解决 uni-app 内置浏览器中的跨域问题：

1. 使用代理服务器

在开发环境中，你可以通过配置代理服务器来解决跨域问题。uni-app 支持在 vue.config.js 中配置代理。

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://your-api-server.com', // 目标服务器地址
        changeOrigin: true, // 允许跨域
        pathRewrite: {
          '^/api': '' // 重写路径
        }
      }
    }
  }
};

在代码中，你可以使用 /api 作为前缀来请求数据，代理服务器会自动将请求转发到目标服务器。

2. 后端设置 CORS 头

如果你有权限控制后端服务器，可以在后端设置 CORS（跨域资源共享）头，允许特定的域名访问资源。

例如，在 Node.js 中，你可以使用 cors 中间件：

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({
  origin: 'http://your-uni-app-domain.com' // 允许的域名
}));

app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello, world!' });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

3. 使用 JSONP

如果后端支持 JSONP，你可以使用 JSONP 来绕过跨域限制。JSONP 通过动态创建 <script> 标签来加载数据，不受同源策略的限制。

uni.request({
  url: 'http://your-api-server.com/api/data?callback=handleResponse',
  dataType: 'jsonp',
  success: (res) => {
    console.log(res.data);
  }
});

function handleResponse(data) {
  console.log(data);
}

4. 使用 uni.request 的 withCredentials 选项

如果你需要发送跨域请求并携带 cookies，可以在 uni.request 中设置 withCredentials 为 true。

uni.request({
  url: 'http://your-api-server.com/api/data',
  method: 'GET',
  withCredentials: true,
  success: (res) => {
    console.log(res.data);
  }
});