I have been working on a hybrid app that uses express and cors, this app sends get and post requests from a client js file to a server file. After getting the functionality working I have been adding finishing touches, and when making a get request I have gotten the following error:
Access to XMLHttpRequest at 'http://address:3000/search/Cottonelle' from origin 'http://localhost:8000' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://address.com' that is not equal to the supplied origin.
"Address" is the machine's ip address. The app lets users make entries for different items and send them to the server to be saved, as well as retrieve them from the server. The app worked while using 'http://localhost' in place of the address, and through some testing I have found that it works when the html's CSP connect-src and the address used in the client js file are both the ip address, indicating the problem is with the server js file. While get requests don't work, the post request still does. The difference between the post and get requests is that post uses '/post' as its route whereas get uses '/search/:query'. The following should be the shortest necessary code to reproduce the problem:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com
;connect-src http://address:3000">
<script src="jquery.js"></script>
<script src="client.js"></script>
</head>
<body>
</body>
</html>
client.js:
const address = "http://address:3000"
let name = "test"
$.get(address + "/search/" + name ,function(data, status){
alert("The status text is: " + status + "\nThe status code is: " + data);
});
server.js:
const express = require('express')
var cors = require('cors')
const app = express()
var corsOptions = { origin: 'http://address.com', optionsSuccessStatus: 200}
app.use(cors(corsOptions))
const port = 3000
app.get('/search/:query', (req, res) => {
let myStatus = res.statusCode;
res.sendStatus(myStatus)
})
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})
the server.js authorized http://address.com but not localhost:8000 (i think the execution of your website in local)
to solve your issue add localhost:8000 in authorized host of server.js
app.use(cors(
{ origin: 'http://address.com', optionsSuccessStatus: 200},
{ origin: 'http://localhost:8000', optionsSuccessStatus: 200}
))