基于Cordova的混合应用遭遇Access-Control-Allow-Origin错误求助

嘿，我来帮你搞定这个Access-Control-Allow-Origin错误！首先得明确：Chrome的CORS扩展在Cordova的WebView里完全没用，因为Cordova是用自带的WebView运行应用，不是Chrome浏览器，所以必须从服务器端和Cordova配置两方面入手解决。

问题分析 #

你的代码里注释了旧版Socket.io的CORS配置（io.set('origins','*:*')），但新版Socket.io已经废弃了这种写法；另外虽然引入了cors包，但可能没正确挂载，而且Socket.io需要单独配置CORS规则，和Express的CORS是分开的。

解决方案步骤 #

1. 正确配置Express的CORS中间件

先确保cors中间件在Express应用中正确挂载，这样普通的HTTP请求（比如API接口）就能通过CORS校验：

var app = require('express')();
var cors = require('cors');
var http = require('http').Server(app);

// 挂载CORS中间件，开发阶段允许所有源，生产环境替换为具体的域名/源
app.use(cors({
  origin: "*",
  credentials: true // 如果需要携带Cookie等凭证的话开启
}));

2. 配置新版Socket.io的CORS规则

Socket.io v3及以上版本需要在创建实例时单独配置CORS，替代旧版的io.set('origins')写法：

var io = require('socket.io')(http, {
  cors: {
    origin: "*", // 开发阶段允许所有源，生产环境指定你的Cordova应用相关源（比如file://或你的测试域名）
    methods: ["GET", "POST"],
    credentials: true
  }
});

io.on('connection', function(socket){
    console.log('a user connected');
    socket.on('weather_location', function(msg){
        socket.emit('message', msg);
    });
});

// 启动服务器，记得替换成你的端口
http.listen(3000, function(){
  console.log('server running on port 3000');
});

3. 检查Cordova的安全配置

打开你的Cordova项目的config.xml，确保添加了允许访问服务器的规则，避免Cordova的安全策略拦截请求：

<!-- 开发阶段允许所有源，生产环境替换为你的服务器地址 -->
<access origin="*" />
<!-- 允许导航到你的服务器地址 -->
<allow-navigation href="http://your-server-ip:3000/*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />

关键提醒 #

• 生产环境不要用*作为允许的源，要指定具体的域名或Cordova应用的访问源，避免安全风险。
• 如果你的Cordova应用是通过file://协议加载本地资源，有些服务器可能需要特殊配置允许file://作为Origin，不过大部分情况下开发阶段用*就能解决问题。

内容的提问来源于stack exchange，提问作者김정화