uniapp 解决No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.

在 UniApp 开发中，如果你遇到 No 'Access-Control-Allow-Origin' header is present on the requested resource 的跨域问题，可以尝试以下解决方法：

1. 修改服务器的 CORS 设置

跨域问题通常是因为服务器没有设置正确的跨域响应头导致的。你需要在服务端添加 Access-Control-Allow-Origin 响应头来允许跨域请求。具体方法取决于你的服务器框架：

• Node.js (Express):

  app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
  });
  

• Nginx: 在 Nginx 配置文件中添加：

  nginx

  add_header 'Access-Control-Allow-Origin' '*';
  

• Java (Spring Boot): 使用 @CrossOrigin 注解：

  @CrossOrigin(origins = "*")
  @RestController
  public class YourController {
      // Your endpoints
  }
  

2. 本地调试时使用 HBuilderX 的跨域配置

在本地调试时，UniApp 可以通过 HBuilderX 的调试工具来自动解决跨域问题。可以按照以下步骤进行设置：

1. 打开 HBuilderX。
2. 进入项目的 manifest.json 文件。
3. 在 条件编译 下，找到 H5配置，点击 跨域配置。
4. 勾选 允许跨域。

3. 使用 uni.request

如果你是使用 uni.request 发起请求，确保请求配置正确，例如：

uni.request({
  url: 'https://example.com/api', // 目标接口
  method: 'GET', // 请求方式
  header: {
    'Content-Type': 'application/json'
  },
  success: (res) => {
    console.log(res.data);
  },
  fail: (err) => {
    console.log(err);
  }
});

4. 使用代理方式解决跨域

如果服务端无法修改跨域设置，可以考虑使用代理服务器来解决跨域问题。你可以在开发阶段使用 Webpack 的代理功能。

在 vue.config.js 文件中配置代理：

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

这种方式会将本地开发服务器的 /api 请求代理到远程服务器，从而避免跨域问题。

5. 使用 JSONP

如果是简单的 GET 请求，可以使用 JSONP 来实现跨域请求，但这种方法适用于 GET 请求，并且需要服务端支持。

通过服务端配置正确的跨域头或使用代理，通常可以解决 UniApp 开发中的跨域问题。

uniapp 解决No 'Access-Control-Allow-Origin' header is present on the requested resource. 后端使用的是 nodejs 中的 ejs

要解决 No 'Access-Control-Allow-Origin' header is present on the requested resource 跨域问题，并且你的后端使用的是 Node.js 和 EJS 模板引擎，你可以通过以下方法在 Node.js 服务器上启用 CORS（跨域资源共享）：

1. 手动添加 CORS 响应头

你可以在你的 Node.js 服务器代码中手动添加 CORS 相关的响应头。你需要在每次请求的响应中加入 Access-Control-Allow-Origin 等 CORS 相关头信息。以下是一个简单的例子：

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');  // 允许所有来源的请求
  res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE,OPTIONS');  // 允许的请求方法
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');  // 允许的请求头
  if (req.method === 'OPTIONS') {
    return res.status(200).end();
  }
  next();
});

• Access-Control-Allow-Origin：允许跨域的源。* 表示允许所有来源跨域请求。
• Access-Control-Allow-Methods：允许跨域请求的 HTTP 方法。
• Access-Control-Allow-Headers：允许的请求头。 

2. 使用 cors 中间件

更简便的方式是使用现成的 cors 中间件，来自动处理跨域请求。你可以通过 npm 安装 cors 模块，然后在你的应用中使用它。

步骤：

1. 安装 cors 中间件：

   bashnpm install cors 

2. 在项目中引入并使用 cors：

   const cors = require('cors');
   const express = require('express');
   const app = express();
   
   app.use(cors());  // 启用 CORS 中间件
   
   // 你的路由和其他中间件
   app.get('/', (req, res) => {
     res.render('index.ejs');  // 使用 EJS 模板渲染页面
   });
   
   app.listen(3000, () => {
     console.log('Server is running on port 3000');
   });
   

通过上述代码，cors 中间件会自动为所有请求添加正确的 Access-Control-Allow-Origin 响应头，默认允许所有源访问。如果你想限制跨域请求的来源，你可以配置 cors 中间件，如下所示：

app.use(cors({
  origin: 'http://example.com',  // 只允许指定域名的请求
}));

这样就可以有效解决跨域问题，并且与 EJS 模板引擎的使用没有冲突。

/* GET home page. */ router.get('/', function(req, res, next) { res.render('index', { title: 'Express' }); }); 我的接口地址使用的是这种方式，产生的跨域问题

在你使用的这种路由方式下，如果要解决跨域问题，可以按照以下步骤在你的 Node.js 应用中处理跨域请求。

1. 通过 cors 中间件解决跨域问题

最直接、方便的方式就是使用 cors 中间件，它能够自动为你处理跨域请求。

步骤：

1. 安装 cors 中间件： 在你的项目目录中运行以下命令安装 cors：

   bashnpm install cors 

2. 在你的 app.js 文件或路由文件中引入并使用 cors： 在 Express 应用中引入 cors 并使用它：

   const cors = require('cors');
   const express = require('express');
   const router = express.Router();
   
   // 启用 CORS 中间件
   router.use(cors());
   
   /* GET home page. */
   router.get('/', function(req, res, next) {
     res.render('index', { title: 'Express' });
   });
   
   module.exports = router;
   

这样，cors 中间件将会自动为所有的请求添加正确的跨域响应头，解决跨域问题。

2. 手动添加 CORS 头

如果你不想使用 cors 中间件，也可以手动在每个路由中添加跨域相关的头信息。具体操作如下：

const express = require('express');
const router = express.Router();

router.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');  // 允许所有源
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  
  if (req.method === 'OPTIONS') {
    return res.status(200).end();  // 处理预检请求
  }

  next();
});

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

这种方式手动添加了 CORS 相关的响应头。如果你想限制跨域访问的来源，可以将 * 换成你希望允许的特定域名：

res.header('Access-Control-Allow-Origin', 'http://example.com');

3. 确保前后端使用的端口不同

跨域问题通常发生在前后端使用不同的端口或协议。确认前端访问的 URL 和你的后端 API 服务使用的是不同端口时，跨域问题才会出现。如果前后端部署在相同域名和端口下，则跨域问题不会发生。

通过以上任意一种方式，你的接口应该可以解决跨域问题。