I have a golang HTTP server with code like:
http.HandleFunc("/login", func(w http.ResponseWriter, r *http.Request) {
log.Println("New incoming request")
// Authenticate
if u, p, ok := r.BasicAuth(); ok {
log.Println("Success")
return
}
log.Println("Failed")
I call this HTTP endpoint from a JS frontend, a react app deployed on port 3000, using code:
fetch('http://localhost:8080/login', {
method: 'post',
headers: {
'Authorization': 'Basic ' + btoa(authHeader),
'Content-Type': 'application/x-www-form-urlencoded',
'Access-Control-Allow-Origin': '*'
},
body: 'A=1&B=2'
})
.then(function (response) {
console.log("Authentication Success")
})
.catch(function (err) {
console.log("Authentication fail", err)
});
The above code fails with the following logs.
On the server side:
New incoming request
Failed
On the browser, in the developer tools logs:
Fetch API cannot load http://localhost:8080/login. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 401. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Can someone help fix the authentication problem ? I am not sure if I am missing something related to CORS on the server side or doing bad authentication on the client side. Any help ? Thanks.
The Access-Control-Allow-Origin: * has to be sent from the server, not by the client. Assuming you are in a standard net/http handler function, try this code:
func handler(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Access-Control-Allow-Origin", "*")
if (r.Method == "OPTIONS") {
w.Header().Set("Access-Control-Allow-Headers", "Authorization") // You can add more headers here if needed
} else {
// Your code goes here
}
}
First - you need to use schema in your handler:
w.Header().Set("Access-Control-Allow-Origin", "*")
if (r.Method == "OPTIONS") {
w.Header().Set("Access-Control-Allow-Headers", "Authorization") // You can add more headers here if needed
} else {
// Your code goes here
}
But before it you need to specify in main "OPTIONS":
router.HandleFunc("/your_route/", your_method).Methods("POST", "OPTIONS")
It's because your browser doing 2 request - first to check ability to use some headers (Authorization for example) and next step is posting data
Related
I'm trying to make a GET request to a GCP Cloud Function from the frontend in JS, but I am getting the error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://us-central1-<project>.cloudfunctions.net/<function-name>. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
I was originally going to call a 3rd party API from the front end but it gave me this error too, then I was going to see if I could use a CF as a middleman, but I'm guessing I'll need to set up a server?
Surely its possible to make a GET request from the frontend to a cloud function or other site?
axios({
method: 'GET', //you can set what request you want to be
url: "http://<cloud-function>.com/<function-name>",
data: {message: "test"},
}).then(data => {
console.log(data)
}).catch(error => {
console.log(error)
})
This is browser security policy to avoid unexpected request. If you is owner of function, you need to setup a whitelist for your server.
exports.corsEnabledFunction = (req, res) => {
// Set CORS headers for preflight requests
// Allows GETs from any origin with the Content-Type header
// and caches preflight response for 3600s
res.set('Access-Control-Allow-Origin', '*');
if (req.method === 'OPTIONS') {
// Send response to OPTIONS requests
res.set('Access-Control-Allow-Methods', 'GET');
res.set('Access-Control-Allow-Headers', 'Content-Type');
res.set('Access-Control-Max-Age', '3600');
res.status(204).send('');
} else {
res.send('Hello World!');
}
};
This code is following GCP official document https://cloud.google.com/functions/docs/writing/http
It's possible definitely. You need to allow your origin in your cloud function.
On the other hand, please try to use the below:
axios({
method: 'GET', //you can set what request you want to be
url: "https://cors-anywhere.herokuapp.com/http://<cloud-function>.com/<function-name>",
data: {message: "test"},
}).then(data => {
console.log(data)
}).catch(error => {
console.log(error)
})
As mentioned by others, I can allow CORS within the cloud function, but here is how to do so usng Nodejs:
exports.someFunction = (req, res) => {
res.set('Access-Control-Allow-Origin', "*")
res.set('Access-Control-Allow-Methods', 'GET, POST')
res.set('Access-Control-Allow-Headers', 'Content-Type');
let message = req.query.message || req.body.message || 'Hello World!';
res.status(200).send(message);
};
Now I can call this from my frontend.
I habe a client written in Javascript (react) which runs on localhost:3000
Here I have a button that sends the credentials to my backend written in python and using flask. The endpoint is running on localhost:5000/login.
My frontend code looks like this:
loginToDatabase = async () => {
console.log("login to database. user: " + this.state.user+" pw: "+this.state.password);
const response = await fetch("http://localhost:5000/login",{
method: 'POST',
body: {
"user": this.state.user,
"password": this.state.password
},
headers: {
"Content-Type": "application/json"
}
});
console.log("response: "+response)
};
My backend code looks like this:
#app.route("/login", methods=['POST'])
def login():
jsonRequest = request.get_json()
receivedUser = jsonRequest.get('user')
receivedPassword = jsonRequest.get('password')
isConnected = opendatabase.openDatabase('localhost',receivedUser,receivedPassword)
if(isConnected == True):
body = json.dumps({
"connection":isConnected,
})
jsonResponse = Response(
body,
mimetype="application/json",
headers={
"Access-Control-Allow-Origin" : "*",
}
)
return (jsonResponse)
else:
body = isConnected
jsonResponse = Response(
body,
headers={
"Access-Control-Allow-Origin" : "*",
)
return (jsonResponse, 401)
Testing the API with Postman works as expected. However using the frontend I receive this error:
Access to fetch at 'http://localhost:5000/login' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
After doing some research I figured out why this happens and that I need the header
"Access-Control-Allow-Origin" : "*"
which I included. But still could not make it work.
I then read here https://developer.mozilla.org/de/docs/Web/HTTP/CORS that does not work with application/json.
The only allowed values for the Content-Type header are:
application/x-www-form-urlencoded,
multipart/form-data,
text/plain
However I also read here Can't send a post request when the 'Content-Type' is set to 'application/json' that I can set a header
->header('Access-Control-Allow-Headers', 'Content-Type');
which I also tried like this:
if(isConnected == True):
body = json.dumps({
"connection":isConnected,
})
jsonResponse = Response(
body,
mimetype="application/json",
headers={
"Access-Control-Allow-Origin" : "*",
"Access-Control-Allow-Headers": "Content-Type",
}
)
return (jsonResponse)
else:
body = isConnected
jsonResponse = Response(
body,
headers={
"Access-Control-Allow-Origin" : "*",
"Access-Control-Allow-Headers": "Content-Type"
}
)
return (jsonResponse, 401)
But that does also not work.
There are also many more posts about this topic but so far I could not find a solution. I am also new to APIs and webdevelopment.
And also I think my shown login process is far from perfect. It is really just about getting the REST call to work.
Is there a way to solve this and still using JSON? Surely I could use someting like text/plain but that would not be satisfying.
Also (maybe related) if I use text/plain in the frontend I don't receive the error, but in the backend I don't know how the receive the data send via POST. As you can see in the attached picture, I seem to get an empty object?
Where is my mistake and what is the best way to solve this issue with JSON?
I am trying to access linkedin profile using axios get request, which doesn't work on localhost and I get the following error
XMLHttpRequest cannot load
https://api.linkedin.com/v1/people/~:(id,email-address)?format=json.
Response to preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:8030' is therefore not allowed
access. The response had HTTP status code 401.
I am able to get access-token using react-linkedin-login package, after getting the access token I am trying the following code
var linkedInUrl = `https://api.linkedin.com/v1/people/~:(id,email-address)?format=json`;
var headers = {
'Authorization': `Bearer ${accessToken}`,
'Access-Control-Allow-Methods':'GET,PUT,PATCH,POST,DELETE',
'Access-Control-Allow-Origin':'*',
'Access-Control-Request-Headers':'Origin, X-Requested-With, Content-Type, Accept',
'Content-Type':'application/x-www-form-urlencoded'
};
return (dispatch) => {
axios.get(linkedInUrl, {headers}).then(({data}) => {
console.log(data);
}, (error) => {
console.log(error);
});
}
The problems lies in linkedin server how it takes request I guess, it doesn't allow localhost to make call I think. How to overcome this to actually develop the service before I deploy and run on server.
Thanks for helping..
This is because of a browser restriction called the "Same-origin Policy", which prevents fetching data from, or posting data to, URLs that are part of other domains. You can get around it if the other domain supports Cross-origin Resource Sharing (CORS), but it looks like LinkedIn doesn't, so you may have trouble.
One way around this is to have a web service which can proxy your request to LinkedIn - there's no domain restrictions there.
https://en.wikipedia.org/wiki/Same-origin_policy
https://en.wikipedia.org/wiki/Cross-origin_resource_sharing
try jsonp for CORS request - reference - axios cookbook
var jsonp = require('jsonp');
jsonp(linkedInUrl, null, function (err, data) {
if (err) {
console.error(err.message);
} else {
console.log(data);
}
});
EDIT
Use jQuery to perform JSONP request and to set headers
$.ajax({url: linkedInUrl,
type: 'GET',
contentType: "application/json",
headers: header, /* pass your header object */
dataType: 'jsonp',
success: function(data) {
console.log(data);
},
error: function(err) {
console.log('Error', err);
},
});
https://cors-anywhere.herokuapp.com/ - Add this before the url and it will work
I try to get issues from redmine via them Rest Api. When I call it from Postman I get response, but when I do it from my angular App I get such error
OPTIONS https://redmine.ourDomain.net/issues.json 404 (Not Found)
XMLHttpRequest cannot load https://redmine.ourDomain.net/issues.json. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 404.
Its how I do it in Angular
login(user: User): Observable<boolean> {
var headers: Headers = new Headers();
headers.append("Authorization", "Basic " + btoa(user.login + ":" + user.password));
let options = new RequestOptions({ headers: headers });
return this.http.get("https://redmine.ourDomain.net/issues.json", options)
.map((response: Response) => {
debugger;
if (response.status == 200) {
// set token property
// store username and jwt token in local storage to keep user logged in between page refreshes
localStorage.setItem('currentUser', JSON.stringify({ user }));
// return true to indicate successful login
return true;
} else {
// return false to indicate failed login
return false;
}
});
}
And there how request looks in my browser
You'll need to enable CORS access on the backend: http://www.redmine.org/plugins/redmine_cors
Here's a nice extension that will let you test frontend code outside of normal CORS restrictions. It's strictly for testing and won't help a production app, but nice to have: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi
CORS must be set up in the backend. Please note that is NOT a good practice to allow all origins Access-Control-Allow-Origin: '*' and that you will need to specify the other headers as well:
Access-Control-Allow-Methods: GET, OPTIONS
Access-Control-Allow-Headers: authorization.
I am using Laravel Lumen to create an API for my MeteorJS App. This is my code inm y meteorJS on imports\api\tasks.js
...
import { HTTP } from 'meteor/http';
import { WebApp } from 'meteor/webapp';
if (Meteor.is_client) {
// Calling our Meteor server's function
// and simply storing data into current session
Meteor.call('fetchDataFromUrl', function (error, response) {
Session.set('external_server_data', response)
});
// Providing meteor data for template (it renders on data received)
Template.data.server_data = function () {
return Session.get('external_server_data');
};
}
if (Meteor.is_server) {
Meteor.methods({
// Declaring a method
retrieve_doc_types: function () {
this.unblock();
return Meteor.http.get(api_url);
}
});
}
Meteor.methods({
'tasks.insert'(make, model, year) {
check(make, String);
check(model, String);
check(year, String);
if (! Meteor.userId()) {
throw new Meteor.Error('not-authorized');
}
HTTP.call("POST", "http://localhost:8000/api/v1/car",
{data: {"make":make, "model":model, "year":year}},
function (error, result) {
if (!error) {
console.log(result);
} else{
console.log("http post error");
};
});
},
....
but when I got this error:
XMLHttpRequest cannot load http://localhost:8000/api/v1/car. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 405.
tasks.js:81 http post error
do anyone have an idea? I am new with MeteorJS
try this in your server/main.js
WebApp.rawConnectHandlers.use(function(req, res, next) {
res.setHeader("Access-Control-Allow-Origin", "*");
return next();
});
Where do you call the Method? The method is called tasks.insert but the code you provide only calls fetchDataFromUrl method.
Here are some ideas.
Check your call on the client is used asynchronously. From the Metor HTTP doc: On the client, this function must be used asynchronously by passing a callback. Note that some browsers first send an OPTIONS request before sending your request (in order to determine CORS headers).
I had CORS problem too in one of my project and I ended up by using HTTP library server side only. You can do it by surrounding your HTTP call with a Meteor.isServer.
Somebody tried to answer But I am not getting it. You try your luck.
https://codexample.org/questions/9358/no-access-control-allow-origin-error-in-meteor-app.c
Try package - simple:json-routes and put following code at serverside startup.
// Enable cross origin requests for all endpoints
JsonRoutes.setResponseHeaders({
"Cache-Control": "no-store",
"Pragma": "no-cache",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, PUT, POST, DELETE, OPTIONS",
"Access-Control-Allow-Headers": "Content-Type, Authorization, X-Requested-With"
});