uni-app 明明配置了跨域还是报跨域错误

uni-app 明明配置了跨域还是报跨域错误

操作步骤：

无

预期结果：

可跨域

实际结果：

报跨域错误

bug描述：

Access to XMLHttpRequest at ‘https://api.next.bspapp.com/client’ from origin ‘https://dogai.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

image


更多关于uni-app 明明配置了跨域还是报跨域错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

POST https://api.next.bspapp.com/client net::ERR_FAILED 504 (Gateway Time-out)

更多关于uni-app 明明配置了跨域还是报跨域错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html


进一步查明了，是uni-ai-chat流式响应超过60秒就报错，但我明明设置成600秒了。

在使用 uni-app 开发时，即使配置了跨域，仍然可能会遇到跨域错误。以下是一些可能的原因和解决方案：

1. 确保后端服务器配置正确

跨域问题通常是由后端服务器的配置引起的。确保后端服务器已经正确配置了 CORS（跨域资源共享）。常见的配置包括：

  • Access-Control-Allow-Origin：允许的域名，可以设置为 * 或者具体的域名。
  • Access-Control-Allow-Methods：允许的HTTP方法，如 GET, POST, PUT, DELETE 等。
  • Access-Control-Allow-Headers：允许的HTTP头，如 Content-Type, Authorization 等。

例如，在 Express.js 中，可以这样配置：

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

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});

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

2. 使用代理服务器

如果后端服务器无法配置 CORS，或者你不想修改后端代码，可以在 uni-app 中使用代理服务器来解决跨域问题。

在 manifest.json 中配置代理：

{
  "h5": {
    "devServer": {
      "proxy": {
        "/api": {
          "target": "http://your-backend-server.com",
          "changeOrigin": true,
          "pathRewrite": {
            "^/api": ""
          }
        }
      }
    }
  }
}

这样，当你请求 /api/some-endpoint 时，请求会被代理到 http://your-backend-server.com/some-endpoint，从而避免跨域问题。

3. 检查请求URL

确保你在 uni-app 中请求的URL是正确的。有时候，URL拼写错误或者路径不对也会导致跨域问题。

4. 检查浏览器缓存

有时候浏览器缓存可能会导致跨域问题。尝试清除浏览器缓存，或者使用无痕模式进行测试。

5. 检查请求头

某些请求头（如 Authorization、Content-Type）可能会导致跨域问题。确保这些请求头在后端服务器中被允许。

6. 使用 uni.request 的 header 配置

在 uni-app 中，使用 uni.request 时，可以通过 header 配置来设置请求头：

uni.request({
  url: 'http://your-backend-server.com/api/some-endpoint',
  method: 'GET',
  header: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your-token'
  },
  success: (res) => {
    console.log(res.data);
  },
  fail: (err) => {
    console.error(err);
  }
});

7. 检查后端服务器的响应头

确保后端服务器的响应头中没有设置 Access-Control-Allow-Origin 为 null 或者不允许的域名。

8. 使用 JSONP（仅适用于GET请求）

如果跨域请求是 GET 请求，可以考虑使用 JSONP 来解决跨域问题。uni-app 支持 JSONP 请求：

uni.jsonp({
  url: 'http://your-backend-server.com/api/some-endpoint',
  success: (res) => {
    console.log(res.data);
  },
  fail: (err) => {
    console.error(err);
  }
});
回到顶部