Access-Control-Allow-Origin Error..(using cordova)

问题

I'm trying to web server and client..(Hybrid app! using cordova) But Access-Control-Allow-Origin error..so I downloaded chrome extension program cors.. but doesn't working..

[server.js]

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

// io.set('origins','*:*');

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

http.listen(80, function(){
  console.log('listening on *:3737');
});

[index.html]

<!DOCTYPE html>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<html>
<head>
    <title>location_weather</title>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <!-- <script type='text/javascript' src='/socket.io/socket.io.js'></script>   -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.0/socket.io.slim.js"/>
    <!-- <script type="text/javascript" src="./js/socket.io.js"/> -->
    <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?clientId=irru1vaga0dOPnfgy29o&submodules=geocoder"></script>  
 <!--    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; connect-src ws://example.com wss://example.com"> -->
</head>
<body>
    <button id="weatherBtn" onclick="weather_location();">클릭</button>
</body>

</html> 


<script>
    var socket = io.connect('http://202.31.200.138:80');
    //var socket = io();ttp
    $(function (){
        //var socket = io.connect('http://202.31.200.138:3330');

        socket.on('message', function(data){
            console.log(data);
            alert(data);
        });

    });

    function weather_location(){
        alert("hello");
        socket.emit('weather_location','message');
    }
    // function location_weather(){
    //  if(navigator.geolocation){
    //      navigator.geolocation.getCurrentPosition(function(position){
    //          alert("위도 : " + position.coords.latitude + "tt" + position.coords.longitude);
    //      }, function(error){
    //          console.error(error);
    //      },{
    //          enableHighAccuracy : false, 
    //          maximumAge : 0, 
    //          timeout : Infinity
    //      });
    //      socket.emit('weather_location',position.coords.latitude );
    //  } else {
    //      alert("GPS를 지원하지 않습니다.");
    //  }

    //      //return false;
    // }


</script>

[error]

The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'null' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Please Help me...

回答1:

You need to add the whitelist plugin,

https://github.com/apache/cordova-plugin-whitelist

In config.xml add

<!-- will not stop any calls -->
<access origin="*" />

回答2:

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

You can use like this also , may be it will help.

回答3:

This might be related to chrome issue if your cordova is using chrome as a default browser of webview. I've encounter the issue on v76.0.3809.89 of chrome and updating to v76.0.3809.111 solved the Access-Control-Allow-Origin issue.

来源：https://stackoverflow.com/questions/49937905/access-control-allow-origin-error-using-cordova

标签

javascript

html

node.js

cordova

hybrid