I'm attempting to make a request from Axios to retrieve data from GitHub. I am receiving a failure error that makes sense, and I'm wondering if this is the expected behavior and this type is simply not possible from the client side, or if there is a way to make this request that I am simply missing:
componentDidMount() {
axios
.get('https://github.com/users/lukeschlangen/contributions',{
headers: {
'Access-Control-Allow-Origin': '*'
}
})
.then(res => {
this.streakCounter(res);
})
.catch(err => console.log(err));
}
streakCounter(body) {
const $ = cheerio.load(body);
var data = [];
$('svg').find('rect').each(function(index, element) {
data.push({
count: parseInt($(element).attr('data-count')),
date: new Date($(element).attr('data-date'))
})
});
var yesterday = new Date();
yesterday.setDate(yesterday.getDate() - 1);
data = data.sort(function(a, b) {
return new Date(b.date) - new Date(a.date);
}).filter(function(el) {
return el.date.getTime() <= yesterday.getTime();
});
var streakCount = 0;
for (var i = 0; i < data.length; i++) {
if (data[i].count == 0) {
break;
}
streakCount++
}
console.log('streakCount:', streakCount);
}
My guess is that this is something GitHub might simply reject outright and that there is no way around this from the client side. This is the error I get in response:
Failed to load https://github.com/users/lukeschlangen/contributions:
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.
I'd prefer to do this without a server if possible, so I want to make sure before I throw in the towel.
You won't be able to get around this in the front-end because it requires server-side changes by Github.
But, you could have your front-end ping your back-end, which then hits that URL and passes the information forward, or use a service to get around this like cors-anywhere.
Related
I'm developing an app with Ionic React, which performs some HTTP requests to an API. The problem is I need to store the response of the request in a local storage so that it is accessible everywhere. The way I'm currently doing it uses #ionic/storage:
let body = {
username: username,
password: password
};
sendRequest('POST', '/login', "userValid", body);
let response = await get("userValid");
if (response.success) {
window.location.href = "/main_tabs";
} else if (!response.success) {
alert("Incorrect password");
}
import { set } from './storage';
// Handles all API requests
export function sendRequest(type: 'GET' | 'POST', route: string, storageKey: string, body?: any) {
let request = new XMLHttpRequest();
let payload = JSON.stringify(body);
let url = `http://localhost:8001${route}`;
request.open(type, url);
request.send(payload);
request.onreadystatechange = () => {
if (request.readyState === 4 && storageKey) {
set(storageKey, request.response);
}
}
}
The problem is that when I get the userValid key the response hasn't come back yet, so even awaiting will return undefined. Because of this I have to send another identical request each time in order for Ionic to read the correct value, which is actually the response from the first request. Is there a correct way of doing this other than just setting timeouts everytime I perform a request?
You are checking for the results of storage before it was set. This is because your sendRequest method is calling an asynchronous XMLHttpRequest request, and you are checking storage before the sendRequest method is complete. This can be fixed by making sendRequest async and restructuring your code a bit.
I would suggest you instead look for examples of ionic react using hooks or an API library - like fetch or Axios. This will make your life much easier, and you should find lots of examples and documentation. Check out some references below to get started:
Example from the Ionic Blog using Hooks
Example using Fetch using React
Related Stack Overflow leveraging Axios
I am trying to add RETRY Logic in the context of - I make an API call -> response is 401 -> I invoke APi to request for a NEW Token in the background. The poin there si MY API Calls shouldnt fail. Following is my API File (This is common - Every API in my application invokes this File to make an FETCH)
NOTE : I have seen articles using the fetch().then() approach, but we are using YIELD.
Specific API File -
// apiRequest = part of api.js file i am specifying below
const response = yield retry(3,1000,apiRequest,options); // My apiRequest while trying for getting new access tokens send me a NULL, do we want that ?
if (undefined !== response && null !== response) {
const formattedResponse = yield apply(response, response.json);
if (response.status === 200) {
yield call(handleAddCampaignResponseSuccess, formattedResponse);
} else {
yield call(handleAddCampaignResponseFailure, formattedResponse);
}
} else{
// Show some Message on UI or redirect to logout
}
// api.js
function* apiRequest(options) {
const { method, body, url } = options;
const accessToken = yield select(selectors.AccessToken);
const idToken = yield select(selectors.IdToken);
try {
var response = yield call(fetch, url, {
method: method,
body: body,
headers: {
"Content-Type": ContentTypes.JSON,
Authorization:
accessToken != "" ? `Bearer ${accessToken} ${idToken}` : "",
},
});
if (null !== response) {
if (response.status === HTTP_CODES.HTTP_UNAUTHORIZED) {
// Unauthorized requests - redirect to LOGOUT
// Request for Refresh Token !
yield put(refreshTokenOnExpiry());
return null; // Is this necessary
} else if (response.status === HTTP_CODES.HTTP_NOT_FOUND) {
return null;
} else if (response.status === HTTP_CODES.HTTP_SERVER_ERROR) {
// Logout cos of serrver error
yield put(handleLogout());
return null;
} else {
console.log("From Else part");
// - Called on intent to ensure we have RESET redirections and that it does not cause issues of redirection.
yield put(resetRedirections());
return response;
}
} else {
// Handle Logout
yield put(stopTransition());
yield put(handleLogout());
}
} catch (error) {
// Cors Error in case of DEV URL
// See if SAGA is Still listening to the Action Dispatches
console.log("From CATCH BLOCK");
yield put(stopTransition());
yield put(handleLogout());
return null;
}
}
My concern is the documentation says that - if API request fails then it will retry, I do not get the meaning of it. Does it mean if the API returns NULL, or anything other than Http 200 ? Cos I want the API to retry in case of 401
API.JS is the file invoked by ALL API's across my website. Also, how can I ensure that refreshTokenOnExpiry gets called ONLY once (meaning at a time there will be multiple API calls and each one when got a 401 will eventually invoke refreshTokenOnExpiry this API)
I am new to generator functions, so I am sure I must have goofed up somewhere.
Also if anyone who can help me build this code correctly, would be great help. Thanks !
Adding Image for reference - I want the FAILED API's to be retried which aint happening :
My concern is the documentation says that - if API request fails then it will retry, I do not get the meaning of it. Does it mean if the API returns NULL, or anything other than Http 200 ? Cos I want the API to retry in case of 401
Scroll down to the section "Retrying XHR calls" in the redux-saga recipes to get an idea of what the retry effect is doing behind the scenes.
The retry effect can be used on any function, no just an API call, so it's not looking at the response code. It defines "failure" as code that throws an error rather than completing execution. So what you need to do is throw an error in you apiRequest.
No guarantees, but try this:
if (response.status === HTTP_CODES.HTTP_UNAUTHORIZED) {
// Unauthorized requests - redirect to LOGOUT
// Request for Refresh Token !
yield put(refreshTokenOnExpiry());
throw new Error("invalid token");
}
You need to figure out how to make sure than the new token gets set before retrying. You might want to build your own chain of actions rather than relying on retry. For example, you can put an action with type "RETRY_WITH_NEW_TOKEN" that has a payload containing the original options and the token that it was tried with. That way you can compare it against the token in state to see if you have a new one.
I am stumbled upon a problem, perhaps some one can help. Currently i have installed axios via npm in react project and while sending a request to node backend i am getting the following error
Access to XMLHttpRequest at 'http://mechanicapp.test:3333/api/manufacturer?pagination=true&perPage=3' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains the invalid value 'false'.
I have read earlier stack overflow post on this concern but none of them solve my problem.
i have tried to set Access-Control-Allow-Origin in the header of request but it did not help.
w.Header().Set("Access-Control-Allow-Origin", "*")
I am using Adonis.js Framework for my backend, I am wondering if some on can help me out.
My code for sending request is as follows,perhaps it can help you in solving the query.
function checkAuthTokenExclusion(arr, url) {
return (arr.indexOf(url) != -1);
}
let responseFormat = {
error: false,
response: {},
}
/*exclusion array, add those url to this array for which you dont want to set token in header*/
var exclusion = ['user-login'];
const axiosRequest = () => {
const defaultOptions = {
baseURL: "http://mechanicapp.test:3333/api/",
/* method: 'get',*/
headers: {
'Content-Type': 'application/json',
},
};
// Create instance
let instance = axios.create(defaultOptions);
// Set the AUTH token for any request
instance.interceptors.request.use(function (config) {
/*the token will be added to header for those url which are not found in the exclusion array*/
if (!checkAuthTokenExclusion(exclusion, config.url)) {
const token = localStorage.getItem('fixlo-access-token');
config.headers.Authorization = token ? `Bearer ${token}` : '';
}
return config;
});
return instance;
};
async function makeRequest(requestType = 'get', url, data = {},optionalConfig = {}) {
let requestObj = null;
switch (requestType) {
case 'get':
/*sample params pass code for get requests*/
/*
axiosRequest().get('/', {
params: {
results: 1,
inc: 'name,email,picture'
}
});*/
requestObj = axiosRequest().get(url, data);
break;
case 'post':
requestObj = axiosRequest().post(url, data,optionalConfig);
break;
case 'put':
requestObj = axiosRequest().put(url, data,optionalConfig);
break;
case 'delete':
requestObj = axiosRequest().delete(url, data);
break;
default:
/*if no params matches in switch case*/
requestObj = axiosRequest().get(url, data);
}
await requestObj.then(callResponse => {
/*success*/
responseFormat.response = callResponse.data;
}).catch(error => {
/*error*/
responseFormat.error = true;
responseFormat.response = error.response.data;
});
return responseFormat;
}
// export default axiosRequest();
export default makeRequest;```
Cross-Origin Resource Sharing (CORS) is a way to allow incoming HTTP requests from different domains.
It is very common in AJAX applications where the browser blocks all cross-domain requests if the server does not authorize them.
So to solve your query, your server should enable the cross origin requests, not the client.
Adonis.js give built in feature to turn the CORS on and off,turning it on will let your server start accepting requests from cross origins.
To do so, simply in your adonis server directory
Go to your config directory.
Find cors.js and change origin from false to true
Your server should know start accepting request from cross origins.
You can read more here at https://adonisjs.com/docs/4.1/cors
I'm writing a simple web with Rocket as backend and React as frontend.
The code snippet looks like this for login page
#[post("/login", data = "<data>")]
pub fn login(
conn: DbConn,
mut cookies: Cookies<'_>,
data: Form<LoginForm>,
) -> Result<JsonValue, NotFound<String>> {
let valid_account = match Account::find_by_email(&*conn, data.email.as_str()) {
Ok(account) => {
if account.password == data.password {
account
} else {
return Err(NotFound("Incorrect email or password!".to_string()));
}
}
Err(_) => return Err(NotFound("Incorrect email or password!".to_string())),
};
cookies.add_private(
Cookie::build(AUTH_COOKIE, valid_account.id.to_string())
.same_site(rocket::http::SameSite::Strict)
.finish(),
);
Ok(json!({
"email": valid_account.email,
"name": valid_account.name,
}))
}
Code for main.rs
fn main() {
rocket::ignite()
.mount("/", routes![
account::login::login,
],
)
.register(catchers![errors::unauthorized])
.attach(rocket_cors::CorsOptions::default().to_cors().unwrap())
.manage(establish_connection())
.launch();
}
and code for React when trying to send the post request
export const postForm = async (
pathUrl: string,
postInfo: { [name: string]: any }
) => {
let axiosConfig = {
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Access-Control-Allow-Origin': '*',
},
};
try {
const response = await axios.post(
baseUrl + pathUrl,
querystringify.stringify(postInfo),
axiosConfig
);
return response.data as CurrentUser;
} catch (err) {
console.log(err);
return Promise.reject(err.response);
}
};
The code works fine it I enter the correct email and password.
However, it cannot capture the error message if I enter the wrong credentials.
Rocket log are the same between successful login and failure login which are
OPTIONS /login:
=> Error: No matching routes for OPTIONS /login.
=> Warning: Responding with 404 Not Found catcher.
=> CORS Fairing: Turned missing route OPTIONS /login into an OPTIONS pre-flight request
=> Response succeeded.
POST /login application/x-www-form-urlencoded:
=> Matched: POST /login (login)
=> Outcome: Success
=> Response succeeded.
and the error log in browser I captured was Error: "Request failed with status code 404" which was not the expected error message hard coded inside post function.
I believe it has something to do with Option or preflight processed inside Rocket which maybe in the purpose of security. But how can I suppress the system error and let my code to take over?
I have read previous SO post like state undefined: while sending post request from react app and GitHub issues like https://github.com/SergioBenitez/Rocket/issues/25. And still cannot find answer for my problem.
Thanks in advance!
Apparently I made several mistakes here due to unfamiliar with Rocket and React.
List here in case someone made the similar mistakes.
The 404 status code is from the first code snippets Result<JsonValue, NotFound<String>>. So if we write the return type as Result<JsonValue, Unauthorized<String>>, it would return 401 as unauthorized user.
Second, axios only receives json type and cannot parse string (correct me if I'm wrong). So we need to change the return type in server to Result<JsonValue, Unauthorized<JsonValue>>.
I have made axios post request but my server couldn't handle the request so it returns some error. In such cases, I need to make the request again in my axios response interceptor. Any easy way to do
You can try this:
axios.interceptors.response.use(undefined, (err) => {
const count = (err.config || {}).retryCount;
if (count > 0) {
return axios({ ...err.config, retryCount: count - 1 });
}
throw err;
});
axios.get('/', { retryCount: 3 });
Add in && err.status === ... if you only want to retry for certain errors (probably only server errors rather than client errors).