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=".11.0.min.js"></script>
<script src=".2.1.min.js"></script>
<!-- <script type='text/javascript' src='/socket.io/socket.io.js'></script> -->
<script src=".io/2.1.0/socket.io.slim.js"/>
<!-- <script type="text/javascript" src="./js/socket.io.js"/> -->
<script type="text/javascript" src=".js?clientId=irru1vaga0dOPnfgy29o&submodules=geocoder"></script>
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; connect-src ws://example wss://example"> -->
</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...
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./jquery-1.11.0.min.js"></script>
<script src="http://code.jquery./jquery-migrate-1.2.1.min.js"></script>
<!-- <script type='text/javascript' src='/socket.io/socket.io.js'></script> -->
<script src="https://cdnjs.cloudflare./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./openapi/v3/maps.js?clientId=irru1vaga0dOPnfgy29o&submodules=geocoder"></script>
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic. 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; connect-src ws://example. wss://example."> -->
</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...
Share Improve this question asked Apr 20, 2018 at 9:01 김정화김정화 311 gold badge1 silver badge8 bronze badges4 Answers
Reset to default 7You need to add the whitelist plugin,
https://github./apache/cordova-plugin-whitelist
In config.xml add
<!-- will not stop any calls -->
<access origin="*" />
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.
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.
Try using the cors in you app middleware
app.use(cors());