I have the following GET request:
GET http://www.google.ie/ HTTP/1.1
Host: www.google.ie
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:5.0) Gecko/20100101 Firefox/5.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip, deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Proxy-Connection: keep-alive
Cookie: PREF=ID=0000043ea43e2426:U=204008a193b06a93:FF=0:TM=1310983818:LM=1310983985:S=HhQ3hzHoRpfrsFN4; NID=50=bT7R608p1asdflr9QiJ_cY80WjaFZ6cB-IJGLT6rpSdiH6bQwnxAEDGTJ1k4K3-A4Y6327iyepbXL6d3fnomtBcWXPQ7A5Px1zckZGBoo8gtMrixSGneodtc7IIaxSu; SID=DQAAALcAAACa0eOu2S9ezDasdfx32stdYzKQQCc7Q4dcYucZkXOaQkXKmfkr0iMlPQZkwy4PlQLzZsiO_5_lLDclyBDJsJIKU0my000owlYMX14K22pBopTN1EUlOrJ7LIkwhznasdfBleSojFfhMbn0BoYM1WAzwnpMAttoAuzG0bZXcScgZkDizC2FUHXVV3-eHZPrS2ncychNguPNZ_M9V_oEtoqJUmqasdf_kaKTOM2KnT0P5wMswKru8_KrkwK6iCc7ag; HSID=A78ACtAr9H6MYp-dn
Cache-Control: max-age=0
I want to get the reponse in node.js. Can someone please point me in the right direction as to how I might do this?
Many thanks in advance,
One place to start is the http module docs for http.request.
Is it, proxy? If so, then you can use such proxy:
var net = require('net');
// Create TCP-server
var server = net.createServer( function(soc){ // soc is socket generated by net.Server
// Incoming request processing
soc.on('data', function(data){
// Create new socket
var client = net.Socket();
// Get host from HTTP headers
var re = /[^\n]+(\r\n|\r|\n)host:\w*([^:\r\n]+)/i;
var host = data.toString('utf-8').match(re);
// Pause soc for inner socket connection
soc.pause();
// Connect to Node.js application
client.connect(80, host);
client.on('connect', function()
{
// Write request to your node.js application
client.write(data.toString('utf-8'));
});
client.on('data', function(cdata)
{
// Return socket to live
soc.resume();
// Write client data to browser
soc.write(cdata.toString('utf-8'));
soc.pipe(soc);
soc.end();
});
client.on('end', function(){
client.destroy();
});
});
}
);
server.on('error', function (err){
// Error processing i just pass whole object
console.log(err);
});
server.listen(8088);
console.log('Server is listening %d\n', 8088);
Related
I am running a Vue project on my local dev server with a firebase function also running on local dev. Whenever I try to make a fetch request to my "beckend" I get a CORS error.
PREFLIGHT REQEUST
OPTIONS /api/url HTTP/1.1
Host: localhost:5001
Connection: keep-alive
Accept: */*
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type
Origin: http://localhost:8080
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
Sec-Fetch-Dest: empty
Referer: http://localhost:8080/
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
RESPONSE
HTTP/1.1 400 Bad Request
x-powered-by: Express
access-control-allow-origin: http://localhost:8080
access-control-allow-methods: POST, OPTIONS
access-control-allow-headers: Content-Type
content-type: application/json; charset=utf-8
content-length: 44
etag: W/"2c-1mdAJaORqKZ8xUSbM/cjasU4RC0"
date: Tue, 20 Jul 2021 14:40:25 GMT
connection: keep-alive
keep-alive: timeout=5
Here's my code:
FRONTEND
fetch(/api/url, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
currency: "usd",
paymentMethodType: "card",
amount: 1880,
}),
}).then();
BACKEND
exports.myFunctionName = functions.https.onRequest(async (req, res) => {
const origin = req.headers.origin;
if (ALLOWED_ORIGINS.includes(origin)) {
res.setHeader("Access-Control-Allow-Origin", origin);
}
res.setHeader("Access-Control-Allow-Methods", "POST, OPTIONS");
res.setHeader("Access-Control-Allow-Headers", "Content-Type");
const {paymentMethodType, currency, amount} = req.body;
const params = {
payment_method_types: [paymentMethodType],
amount: +amount,
currency: currency,
};
try {
// Create a PaymentIntent with the amount, currency, and a payment method type.
const paymentIntent = await stripe.paymentIntents.create(params);
// Send publishable key and PaymentIntent details to client
res.status(200).json({
clientSecret: paymentIntent.client_secret,
});
} catch (e) {
return res.status(400).json({
error: {
message: e.message,
},
});
}
}
I can't seem to figure this out, I've been working at it for a few hours. Can anyone help?
The problem is your function treats the preflight request as if it were the actual POST request, but they're separate and not sent simultaneously.
The browser automatically sends the OPTIONS preflight request (which has no body) before the POST. Your function tries to pass non-existent body parameters from OPTIONS to the Stripe API, resulting in an exception caught by your catch handler, which responds with a 400.
The backend function should respond to OPTIONS with an ok status (e.g., 200) before the browser can send the POST request:
exports.myFunctionName = functions.https.onRequest(async (req, res) => {
// Handle preflight request
if (req.method === "OPTIONS") {
// allow `POST` from all origins for local dev
res.set("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Methods", "POST");
return res.sendStatus(200);
} else {
// Handle `POST` request here...
}
}
Hi I'm trying to read the Request body sent by React app with axios to Asp.net core app (IdentityServer 4) to get the token. The following code is from react app.
const headers = {
'Content-Type': 'application/json',
}
const data = {
'grant_type': 'password',
'client_id': '*********-****-****-****-************',
'client_secret': 'ClientSecret',
'username': 'user',
'password': 'password',
'scope': 'email',
'response_type': 'id_token'
}
axios.post('http://localhost:5000/connect/token', data, {
headers: headers
})
.then((response) => {
console.log(response)
})
.catch((error) => {
console.log(error)
})
IdentityServer code is as follows ( I have registered IHttpContextAccessor in startup.cs class )
namespace IdentityServer
{
public class CustomCorsPolicy : ICorsPolicyService
{
private readonly IHttpContextAccessor _httpContext;
public CustomCorsPolicy(IHttpContextAccessor httpContext)
{
_httpContext = httpContext; ----------> Trying to access request body here I want to get the clientId sent by react app in request body.
}
public Task<bool> IsOriginAllowedAsync(string origin)
{
return Task.FromResult(true);
}
}
}
When I try to debug to see the request body I'm getting the following data
Am I doing anything wrong here? If so can anyone help me to know How can I get the request body.
Your custom CustomCorsPolicy will only be called on CORS-related requests and that means only when you do AJAX-requests from your browser, for example when you call the UserInfo endpoint.
So, that means that your CustomCorsPolicy is never called as part of the normal authentication request process, only during AJAX-requests. during the first CORS preflight request to the /connect/userinfo endpoint (with the OPTIONS http request method/verb) there is NO token or clientID provided at all.
During the second request, you get the access token from the Authorization header. You could with some hard work get the clientID from the access token. The token is in the request headers, not request body (that is empty during both requests).
The first request looks like:
OPTIONS https://localhost:6001/connect/userinfo HTTP/1.1
Host: localhost:6001
Connection: keep-alive
Accept: */*
Access-Control-Request-Method: GET
Access-Control-Request-Headers: authorization
Origin: https://localhost:5001
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
Sec-Fetch-Dest: empty
Referer: https://localhost:5001/ImplicitFlow/LoggedInUsingFragment
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.89 Safari/537.36
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
the second request to the-user info endpoint looks like this:
GET https://localhost:6001/connect/userinfo HTTP/1.1
Host: localhost:6001
Connection: keep-alive
Accept: */*
DNT: 1
Authorization: Bearer eyJhbGciOiJSUzI1NiIsImtpZCI6IjY1NzVBNTk1MkYwQUI3MTA3NzM2RDQ4RTY4REQwOTI2IiwidHlwIjoiYXQrand0In0.eyJuYmYiOjE1OTUzNTUxNDYsImV4cCI6MTU5NTM1ODc0NiwiaXNzIjoiaHR0cHM6Ly9sb2NhbGhvc3Q6NjAwMSIsImF1ZCI6WyJwYXltZW50IiwiaW52b2ljZSIsIm9yZGVyIiwiaHR0cHM6Ly9sb2NhbGhvc3Q6NjAwMS9yZXNvdXJjZXMiXSwiY2xpZW50X2lkIjoiaW1wbGljaXRmbG93Y2xpZW50Iiwic3ViIjoiVXNlcklEMTIzNDU2IiwiYXV0aF90aW1lIjoxNTk1MzU0ODk0LCJpZHAiOiJsb2NhbCIsInNlbmlvcml0eSI6IlNlbmlvciIsImNvbnRyYWN0b3IiOiJubyIsImVtcGxveWVlIjoieWVzIiwianRpIjoiMUY4NkE1NERBNzBBN0E1M0Q0RTRFOURCMUZFNTg5RDciLCJzaWQiOiIxRUMxNzAwREUxODZGOEFGRTc0MEQ3QTBGMjM1MDI1RCIsImlhdCI6MTU5NTM1NTE0Niwic2NvcGUiOlsib3BlbmlkIiwiZW1haWwiLCJwcm9maWxlIiwic2hvcC5hZG1pbiJdLCJhbXIiOlsicHdkIl19.Ey9e1OyVgm8ctrUmv9BlKsZburIHmKwEZc53EWu7H0dXg_DbgzPyIttq35wkGGrL6mbL9k4v9MPtwgvXP2iStR-9IMSEjXml9Wb0oFcAmlhWYSMW3bQ-64qUrgzwiDW6WFTcBAFR5q_cw-HEjYbLQzxhV5_6QuaJTfF15OpqxEk9074A-FaM7I-WvgTSMesqZCqupuYBmXPOxnTaII8ZMy1EnnOaDfT1dUUBIU1gB4H4waU_iUoX6u_nJrgXVlm9kYn0CkcV9qiVMlRCAg_t1q-nBjjRMZCrfa5hKgAdz2rzmjUpKGTCIU30RkryVDf845xMbcEiC6KZhPai_pPSmg
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.89 Safari/537.36
Origin: https://localhost:5001
Sec-Fetch-Site: same-site
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: https://localhost:5001/ImplicitFlow/LoggedInUsingFragment
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
But back to the initial question, I think you need to rethink what you try to achieve, beause the CORS service is only called on CORS-requests, after the client already have received their access-token. I think you can solve it much easier by creating different client definitions and ApiScopes for the different client and rights that you want to control.
Im trying to send a JSON using the angular 8 HttpClient to an ASP.net core backend using the following code:
import { HttpClient, HttpHeaders} from '#angular/common/http';
import { User } from '#/_models';
login(username, password) {
return this.http.post<any>(`https://${config.apiUrl}/api/User/LoginUser`,
JSON.stringify({
"username": username,
"password": password
})
).pipe(map(user => {
// store user details and jwt token in local storage to keep user logged in between page refreshes
localStorage.setItem('currentUser', JSON.stringify(user));
console.log(user);
this.currentUserSubject.next(user);
return user;
}));
}
}
However, when trying to send the JSON when logging in to the login page which is hosted using the command npm start, so
localhost:8080/login
is sending the request.
The request headers are:
POST /api/User/LoginUser HTTP/1.1
Host: (Checked_and_correct_API_URL)
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:71.0) Gecko/20100101 Firefox/71.0
Accept: application/json, text/plain, */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: http://localhost:8080/login
Content-Type: text/plain
Content-Length: 49
Origin: http://localhost:8080
DNT: 1
Connection: keep-alive
the response headers are:
HTTP/2.0 415 Unsupported Media Type
content-type: application/problem+json; charset=utf-8
server: Microsoft-IIS/10.0
x-powered-by: ASP.NET
date: Thu, 19 Dec 2019 13:10:01 GMT
content-length: 147
X-Firefox-Spdy: h2
and the sent parameters are:
{"username":"jeboimarc2","password":"KUTminor1!"}
Which is also correct
Can anyone tell me why i am getting the unsupported media type error? Thanks in advance.
Pass raw json data, don't convert it to string.
Try like this:
return this.http.post<any>(`https://${config.apiUrl}/api/User/LoginUser`,{"username": username, "password": password })
I am working on simple web app on port 4000 with a RESTful API on port 8080. I have Express setup with the cors package and I seem to be sending the correct headers back from an OPTIONS request, see below:
X-Powered-By: Express
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE
Vary: Access-Control-Request-Headers
Access-Control-Allow-Headers: content-type
Content-Length: 0
This is returned with a status 204 ok. Then I see the PUT request in FF Network console and after about 45 secs the request header appears:
PUT /movies/updatemovie/59f4ee92be4becd967a573ca HTTP/1.1
Host: localhost:8080
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:56.0) Gecko/20100101 Firefox/56.0
Accept: application/json, text/javascript, */*; q=0.01
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Content-Type: application/json
Referer: http://localhost:4000/movies
Content-Length: 151
Origin: http://localhost:4000
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
The request parameters are:
documentID=59f4ee92be4becd967a573ca&title=Captain%20America%3A%20Civil%20UnWar&release=2016&score=9&reviewer=%20Janet%20Garcia&publication=%20MoviesNow
Chrome shows the PUT as having failed after 4mins.
The Data is not getting posted to Mongo, nor do I get any response from the server.
Here is the relevant code:
Web App
$(".panel").each(function (index) {
if ($(this).find("input[name = 'update']").is(":checked")) {
updatedDocument = {
documentID: $(this).data("id"),
title: $(this).find("input#name").val(),
release: $(this).find("input#release").val(),
score: $(this).find("input#score").val(),
reviewer: $(this).find("input#reviewer").val(),
publication: $(this).find("input#publication").val()
};
JSON.stringify(updatedDocument);
console.log(Object.values(updatedDocument));
} // end if
}); // .each
// Now we have the document stored in JSON object, so lets form
// an AJAX req and grab the updated data from our document and send
// a PUT to our API endpoint
$.ajax({
type: 'PUT',
data: updatedDocument,
url: 'http://localhost:8080/movies/updatemovie/' + updatedDocument.documentID,
dataType: 'JSON',
contentType: 'application/json'
}).done(function (response) {
// Check for successful (blank) response
if (response.msg === '') {
// do nothing
}
else {
alert('Error: ' + response.msg);
}
}); // end .done
API
/*
* Put to Update movie.
*/
router.options('updatemovie/:id', cors());
router.put('/updatemovie/:id', cors(), function(req, res) {
const db = req.db;
console.log(req.params.id);
console.log(req.body.publication);
const movieCollection = db.get("movies");
const movieToUpdate = req.params.id; // Assign collection document id from url :id value
const movieTitle = req.body.title;
const movieRelease = req.body.release;
const movieScore = req.body.score;
const movieReviewer = req.body.reviewer;
const moviePublication = req.body.publication;
// Update the movie document from PUT info
movieCollection.update({'_id' : movieToUpdate},
{
$set: {
title: movieTitle,
release: movieRelease,
score: movieScore,
reviewer: movieReviewer,
publication: moviePublication
}
},
function(err) {
res.send((err === null) ? {msg: ''} : {msg: err});
}); // movieCollection .update
});
I get nothing from the console.logs in the API. Any suggestions most welcomed.
UPDATE: By removing line from APP contentType: application/JSON everything now works. I thought I wanted to send data as JSON to my API? Anybody who has any thoughts or input most welcome.
You aren't sending the data as JSON. You've set the content-type header to application/json but the data will still be encoded as application/x-www-form-urlencoded. To send JSON data using jQuery you'd need to encode it yourself:
data: JSON.stringify(updatedDocument),
On the server you'd then need a suitable bodyParser configuration:
app.use(bodyParser.json());
or:
app.use(express.json());
When you removed the line contentType: 'application/json' that header fell back to its default value of application/x-www-form-urlencoded. That matches the format of the data and presumably you have app.use(bodyParser.urlencoded()) or app.use(express.urlencoded()) configured to parse that data. As your data is a flat string/string data structure it doesn't really matter which format you choose, you'll end up with the same values in res.body.
I am using .Net ASP Web API V2 with Angular 1 and Auth0.
After initial login through Auth0 I am getting the following error:
XMLHttpRequest cannot load localhost:3001/profile. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:62379' is therefore not allowed access. The response had HTTP status code 500.
If I refresh I no longer get the error. If I clear the browser data I get the error again but get success after a refresh.
I have CORS enabled in the API config with the required NUGET packages.
I have tried the following solutions because I thought this was a pre-flight issue:
1) Handling the SELECT verb on the controller and globally by intercepting the request.
http://www.jefclaes.be/2012/09/supporting-options-verb-in-aspnet-web.html
2) Adding the select verb as one of the accepted verbs on the controller method.
3) Various answers I have found on here for changing the request.
** I can not share links my rep is too low.
etc.
4) Using a specific origin instead of *
The Controller:
[Route("profile")]
[EnableCors(origins: "*", headers: "*", methods: "OPTIONS")]
public HttpResponseMessage Options()
{
var resp = new HttpResponseMessage(HttpStatusCode.OK);
resp.Headers.Add("Access-Control-Allow-Origin", "*");
resp.Headers.Add("Access-Control-Allow-Methods", "*");
return resp;
}
[Route("profile")]
[EnableCors(origins: "*", headers: "*", methods: "POST")]
[HttpPost]
public object Post([FromBody]dynamic data)
{
string email = null;
var b = new object();
try
{
**** Logic ****
}
catch (Exception ex)
{
**** Return Error ****
}
return b;
}
API Config
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
var cors = new EnableCorsAttribute(
origins: "*",
headers: "*",
methods: "*");
// Web API configuration and services
config.EnableCors(cors);
var clientID = WebConfigurationManager.AppSettings["auth0:ClientId"];
var clientSecret = WebConfigurationManager.AppSettings["auth0:ClientSecret"];
config.MessageHandlers.Add(new JsonWebTokenValidationHandler()
{
Audience = clientID, // client id
SymmetricKey = clientSecret // client secret
});
// Web API routes
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
}
The Angular Request
function postLogin() {
var loginPackage = [];
if (token === null) token = store.get('token');
if (store.get('profile') != null) {
loginPackage = store.get('profile');
}
return $q(function(resolve, reject) {
$http({
method: 'Post',
url: BASE + 'profile',
data: loginPackage,
crossDomain: true,
xhrFields: {
withCredentials: true
},
contentType: 'application/json'
})
.success(function(data, status) {
*** Logic ***
resolve(function() {
resolve(true);
});
})
.error(function(data, status) {
reject(function() {
});
});
});
}
I think I may have been looking at this for too long and have overlooked something fairly simple.
////**** Update ****////
Response:
HTTP/1.1 500 Internal Server Error
Cache-Control: no-cache
Pragma: no-cache
Content-Type: application/json; charset=utf-8
Expires: -1
Server: Microsoft-IIS/10.0
X-AspNet-Version: 4.0.30319
X-SourceFiles: =?UTF-8?B?QzpcVXNlcnNcaWFteWFcRGVza3RvcFxOZXcgZm9sZGVyICgzKVx3ZWJhcGlcQXBpXHByb2ZpbGU=?=
X-Powered-By: ASP.NET
Date: Sun, 08 Jan 2017 00:17:26 GMT
Content-Length: 709
//* UPDATE *///
With a clean browser cache REQUEST (Fails)
POST /profile HTTP/1.1
Host: localhost:3001
Connection: keep-alive
Content-Length: 2372
Accept: application/json, text/plain, */*
Origin: http://localhost:62379
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
Authorization: Bearer null
Content-Type: application/json;charset=UTF-8
Referer: http://localhost:62379/index.html
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en-US;q=0.8,en;q=0.6
I thought this may be the pre-flight but it is my understanding that would be with the OPTIONS verb not the POST verb.
The authorisation is not correctly set by the looks of it.
Authorization: Bearer null
The Response:
HTTP/1.1 500 Internal Server Error
Cache-Control: no-cache
Pragma: no-cache
Content-Type: application/json; charset=utf-8
Expires: -1
Server: Microsoft-IIS/10.0
X-AspNet-Version: 4.0.30319
X-SourceFiles: =?UTF-8?B?QzpcVXNlcnNcaWFteWFcRGVza3RvcFxOZXcgZm9sZGVyICgzKVx3ZWJhcGlcQXBpXHByb2ZpbGU=?=
X-Powered-By: ASP.NET
Date: Sun, 08 Jan 2017 00:31:49 GMT
Content-Length: 709
A second Post is sent immediately after and is successful. It is actually the pre-flight.
The Request:
OPTIONS /profile HTTP/1.1
Host: localhost:3001
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://localhost:62379
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
Access-Control-Request-Headers: authorization, content-type
Accept: */*
Referer: http://localhost:62379/index.html
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: en-GB,en-US;q=0.8,en;q=0.6
And the Response:
HTTP/1.1 200 OK
Cache-Control: no-cache
Pragma: no-cache
Expires: -1
Server: Microsoft-IIS/10.0
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: authorization,content-type
X-AspNet-Version: 4.0.30319
X-SourceFiles: =?UTF-8?B?QzpcVXNlcnNcaWFteWFcRGVza3RvcFxOZXcgZm9sZGVyICgzKVx3ZWJhcGlcQXBpXHByb2ZpbGU=?=
X-Powered-By: ASP.NET
Date: Sun, 08 Jan 2017 00:34:43 GMT
Content-Length: 0
Because of this I can not get beyond the login view. The loading screen sits on error. If I refresh and login again there is no error.
The Request:
POST /profile HTTP/1.1
Host: localhost:3001
Connection: keep-alive
Content-Length: 2367
Accept: application/json, text/plain, */*
Origin: http://localhost:62379
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczovL3ltdC5hdXRoMC5jb20vIiwic3ViIjoiZmFjZWJvb2t8MTAxNTM4MjIxOTc4MTIyNTEiLCJhdWQiOiJWWDhHMFMyUWM5cUFjYnRrM09pMVZMa2NkWGxnWlBtZSIsImV4cCI6MTQ4Mzg3MTMyNywiaWF0IjoxNDgzODM1MzI3fQ.HBQcGC6aad2pLaq3nPuhojrFT2b6Usv64p97b-DCRCU
Content-Type: application/json;charset=UTF-8
Referer: http://localhost:62379/index.html
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en-US;q=0.8,en;q=0.6
The Authorization field now has the token instead of the null value:
Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczovL3ltdC5hdXRoMC5jb20vIiwic3ViIjoiZmFjZWJvb2t8MTAxNTM4MjIxOTc4MTIyNTEiLCJhdWQiOiJWWDhHMFMyUWM5cUFjYnRrM09pMVZMa2NkWGxnWlBtZSIsImV4cCI6MTQ4Mzg3MTMyNywiaWF0IjoxNDgzODM1MzI3fQ.HBQcGC6aad2pLaq3nPuhojrFT2b6Usv64p97b-DCRCU
The response is success and login proceeds.
The token seems to be injected only after a refresh.
My AUTH0 Config is:
authProvider.init({
domain: A0_DOMAIN,
clientID: A0_CLIENT,
callbackUrl: location.href,
loginState: 'out.login',
options:options
});
var refreshingToken = null;
jwtInterceptorProvider.tokenGetter = function(store, jwtHelper) {
var token = store.get('token');
var refreshToken = store.get('refreshToken');
if (token) {
if (!jwtHelper.isTokenExpired(token)) {
return store.get('token');
} else {
if (refreshingToken === null) {
refreshingToken = auth.refreshIdToken(refreshToken)
.then(function(idToken) {
store.set('token', idToken);
return idToken;
})
.finally(function() {
refreshingToken = null;
});
}
}
}
};
jwtOptionsProvider.config({
whiteListedDomains: ['localhost','https://www.ymtechno.com','https://www.ymtechno.com/_api','https://ymtechno.com/_api']
});
$httpProvider.interceptors.push('jwtInterceptor');
})
.run(function($rootScope, auth, store, jwtHelper, $location) {
var refreshingToken = null;
$rootScope.$on('$locationChangeStart',
function() {
var token = store.get('token');
var refreshToken = store.get('refreshToken');
if (token) {
if (!jwtHelper.isTokenExpired(token)) {
auth.authenticate(store.get('profile'), token);
} else {
if (refreshingToken === null) {
refreshingToken = auth.refreshIdToken(refreshToken)
.then(function(idToken) {
store.set('token', idToken);
return idToken;
})
.finally(function() {
refreshingToken = null;
});
return refreshingToken;
} else {
$location.path('login');
}
}
}
});
auth.hookEvents();
After investigating I found the interceptor was not putting the token into the auth header until the application was restarted. This was read as a CORS error because the request was not meeting the criteria for accessing the API. The token value was undefined.
A more in depth thread about injectors and headers can be found here:
Set HTTP header for one request
in the event that you come across the same issue it is a useful reference.