I'm developing an API using pencilblue, everything works fine until I make an AJAX request to this endpoint.
I always get an "origin not allowed" error.
Is there a way to enable CORS with pencilblue?
You can do this through creating your own controller:
https://github.com/pencilblue/pencilblue/wiki/Quickstart:-Controllers
And in there add the relevant headers for CORS. E.g. something like:
module.exports = function (pb) {
//PB dependencies
var util = pb.util;
var BaseController = pb.BaseController;
/**
* CORS Controller
*/
CorsController.prototype.render = function(cb) {
// Add the CORS Header here
var output = {
code: 200,
headers: {
'Access-Control-Allow-Origin': '*'
}
};
this.ts.load('example_api_endpoint', function(error, result) {
output.content = result;
cb(output);
});
return CorsController;
};
Related
Problem Statement: Unable to retrieve data using clubhouse.io api
in Google sheets > Script Editor
Per developers.google.com: Certain HTTP methods (for example, GET) do not accept a payload.
However, the clubhouse v3 api expect body/payload in GET request
Here is method:
function getClubhouseStories() {
try{
var myHeaders = {"Content-Type": "application/json"};
var requestOptions = {
method: 'GET',
headers: myHeaders,
body: JSON.stringify({"query":"lable\:my label"}),
redirect: 'follow',
query: {"token": "XXXXXXXXUUIDXXXXX"},
muteHttpExceptions: true
};
var response = UrlFetchApp.fetch("https://api.clubhouse.io/api/v3/search/stories", requestOptions);
}
catch(error) {
console.error(error);
}
var responseCode = response.getResponseCode();
var responseContent = response.getContentText();
Logger.log(responseCode);
Logger.log(responseContent);
}
Returns:
responseCode >> 401
responseContent >> "{"message":"Sorry, the organization context for this request is missing. If you have any questions please contact us at support#clubhouse.io.","tag":"organization2_missing"}"
The same request works perfect via postman or bash, and requests that don't need body also work via UrlFetchApp.fetch
Tags:
#clubhouse-api #google-apps-scripts #postman
You can include the token and query parameters as part of the URL.
function getClubhouseStories() {
try {
var requestOptions = { muteHttpExceptions: true };
var parameters = {
token: 'XXXXXXXXUUIDXXXXX',
query: 'label:"my label"' // Clubhouse API requires using double quotes around multi-word labels
};
var url = "https://api.clubhouse.io/api/v3/search/stories";
var response = UrlFetchApp.fetch(buildUrl_(url, parameters), requestOptions);
} catch (error) {
console.error(error);
}
var responseCode = response.getResponseCode();
var responseContent = response.getContentText();
Logger.log(responseCode);
Logger.log(responseContent);
}
/**
* Builds a complete URL from a base URL and a map of URL parameters.
* Source: https://github.com/gsuitedevs/apps-script-oauth2/blob/master/src/Utilities.js#L27
* #param {string} url The base URL.
* #param {Object.<string, string>} params The URL parameters and values.
* #return {string} The complete URL.
* #private
*/
function buildUrl_(url, params) {
var paramString = Object.keys(params).map(function(key) {
return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
}).join('&');
return url + (url.indexOf('?') >= 0 ? '&' : '?') + paramString;
}
Other issues you're facing are related to request options that aren't valid UrlFetchApp parameters:
Default method is 'GET', so no need to specify
Content-Type should be specified using contentType, but it defaults to "application/x-www-form-urlencoded", so no need to specify
body is not valid. Should use payload instead, but not in this case, because we need to include parameters in the URL.
redirect is not valid. Should use followRedirects, but that already defaults to true.
query is not valid. Need to manually include in the URL.
The message you received, Sorry, the organization context for this request is missing. is the error you'll receive when you fail to send an authorization token/header.
You need something like this:
var myHeaders = {"Content-Type": "application/json", "Shortcut-Token": "<token>"};
Shortcut API docs
I created a webapi in ASP.NET Core, and I need to consume it using React, the web api works normally, if I use curl or postman among others, it works normally. The problem starts when I'm going to use React, when I try to make any requests for my API with js from the problem.
To complicate matters further, when I make the request for other APIs it works normally, this led me to believe that the problem was in my API, but as I said it works with others only with the react that it does not. I've tried it in many ways.
The API is running on an IIS on my local network
Attempted Ways
Using Ajax
$ .ajax ({
method: "POST",
url: 'http://192.168.0.19:5200/api/token',
beforeSend: function (xhr) {
xhr.setRequestHeader ("Content-type", "application / json");
},
date: {
name: 'name',
password: 'password'
},
success: function (message) {
console.log (message);
},
error: function (error) {
/ * if (error.responseJSON.modelState)
showValidationMessages (error.responseJSON.modelState); * /
console.log (error);
}
});
Using Fetch
const headers = new Headers ();
headers.append ('Content-Type', 'application / json');
const options = {
method: 'POST',
headers,
body: JSON.stringify (login),
mode: 'cors' // I tried with cors and no-cors
}
const request = new Request ('http://192.168.0.19:5200/api/token', options);
const response = await fetch (request);
const status = await response.status;
console.log (response); * /
// POST adds a random id to the object sent
fetch ('http://192.168.0.19:5200/api/token', {
method: 'POST',
body: JSON.stringify ({
name: 'name',
password: 'password'
}),
headers: {
"Content-type": "application / json; charset = UTF-8"
},
credentials: 'same-origin'
})
.then (response => response.json ())
.then (json => console.log (json))
Using Request
var request = new XMLHttpRequest ();
request.open ('POST', 'http://192.168.0.19:5200/api/token', true);
request.setRequestHeader ('Content-Type', 'application / json; charset = UTF-8');
request.send (login);
ERRORS
Console
Network tab
When I do this without being change the content type to JSON it works
because the API returns saying that it is not a valid type.
Apart from allowing CORS in you .NET configuration. You also need to return 200 OK for all OPTION requests.
Not sure how it's done in .NET but just create a middleware that detects the METHOD of the request, and if it's OPTIONS, the finish the request right there with 200 status.
Well I had the same issue and it seems that you need to add the action to the HttpPost attribute in the controller.
Here is an example.
[HttpPost("[action]")]
public void SubmitTransaction([FromBody] SubmitTransactionIn request)
{
Ok();
}
Try like this
public void ConfigureServices(IServiceCollection services)
{
services.AddCors();
}
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
app.UseCors(option => option.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod().AllowCredentials());
app.UseAuthentication();
app.UseMvc();
}
I'm building a React/Redux app that integrates with GitHub's API. This app will require users to sign-in using GitHub's OAuth. I'm trying to use the npm package isomorphic-fetch to do the request but cannot seem to get it to work.
Here is the Request:
require('isomorphic-fetch');
var types = require(__dirname + '/../constants/action_types');
module.exports.handleAuthClick = function() {
return function(dispatch, getState) {
var state = getState();
return fetch('http://localhost:3000/auth')
.then(function(res) {
if (res.status <= 200 && res.status > 300) {
// set cookie
// return username and token
return {
type: HANDLE_AUTH_CLICK,
data: res.json()
};
}
throw 'request failed';
})
.then(function(jsonRes) {
dispatch(receiveAssignments(jsonRes));
})
.catch(function(err) {
console.log('unable to fetch assignments');
});
};
};
Here is my Router
authRouter.get('/', function(req, res) {
res.redirect('https://github.com/login/oauth/authorize/?client_id=' + clientId);
});
And here is the Error I keep getting
Fetch API cannot load https://github.com/login/oauth/authorize/?client_id=?myclientID
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:3000' is therefore not allowed access. If an opaque
response serves your needs, set the request's mode to 'no-cors' to fetch the
resource with CORS disabled.
Looks like this is a security option which prevents a web page from making AJAX requests to different domain. I faced the same problem, and below steps fixed it.
Firstly enable CORS in the WebService app using 'package Manager' console
PM>Install-Package Microsoft.AspNet.WebApi.Cors
Inside App_Start/WebApiConfig.cs file inside the method Register (HttpConfiguration config) add code
config.EnableCors();
Finally add the [EnableCors] attribute to the class
namespace <MyProject.Controllers>
{
[EnableCors(origins: "http://example.com", headers: "*", methods: "*")]
public class MyController : ApiController
{
//some code
My project base on koa,I want to intercept HTTP response,when the response's message is "no promission",then excute 'this.redirect()'.
Your middleware (interceptor in my example) can access the response body after it yield next, so just place your logic after it yields.
var route = require('koa-route');
var app = require('koa')();
var interceptor = function*(next) {
// wait for downstream middleware/handlers to execute
// so that we can inspect the response
yield next;
// our handler has run and set the response body,
// so now we can access it
console.log('Response body:', this.body);
if (this.body === 'no promission') {
this.redirect('/somewhere');
}
};
app.use(interceptor);
app.use(route.get('/', function*() {
this.body = 'no promission';
}));
app.listen(3001, function() {
console.log('Listening on 3001...');
});
I want to pass in the headers my token each time i make a request. the way i do it now is using:
$http.defaults.headers.common['auth_token'] = $localStorage.token;
How could i do that to make that sent to every request, and when it throws an error it should do a
$state.go('login')
If you want to add your token to each request, and respond to any errors, your best bet would be to use an Angular HTTP interceptor.
Subject to your needs, it might look something like this:
$httpProvider.interceptors.push(function ($q, $state, $localStorage) {
return {
// Add an interceptor for requests.
'request': function (config) {
config.headers = config.headers || {}; // Default to an empty object if no headers are set.
// Set the header if the token is stored.
if($localStorage.token) {
config.headers.common['auth_token'] = $localStorage.token;
}
return config;
},
// Add an interceptor for any responses that error.
'responseError': function(response) {
// Check if the error is auth-related.
if(response.status === 401 || response.status === 403) {
$state.go('login');
}
return $q.reject(response);
}
};
});
Hope this helps.