AngularJS2 adding headers to http post doesn't work - http

I'm trying to add headers to my http post request as shown below
import { Injectable } from '#angular/core';
import { Http, Headers, RequestOptions } from '#angular/http';
#Injectable()
export class UserService extends ServiceBase {
apiUrl: string;
private contentHeaders = new Headers();
constructor(private http: Http) {
super();
this.apiUrl = appConfig.apiBaseUrl + '/users';
}
login(user: User) {
this.contentHeaders.append('Accept', 'application/json');
this.contentHeaders.append('Content-Type', 'application/json');
return this.http.post(
this.apiUrl+'/sign_in',
JSON.stringify({user: user}),
{headers: this.contentHeaders}
);
}
}
Headers shown in Chrome DevTools:
OPTIONS /api/v1/users/sign_in HTTP/1.1
Host: offers2win.com
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: POST
Origin: http://evil.com/
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36
Access-Control-Request-Headers: access-control-allow-credentials, content-type
Accept: */*
Referer: http://localhost:3000/?
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8
But these headers are not seen in the Chrome dev tool, network panel. What am I missing here.

Try this
constructor(private http: Http) { }
login(username: any, password: any) {
let body = JSON.stringify({ "email" : username, "password" : password });
let headers = new Headers({"Content-Type": "application/json"});
let options = new RequestOptions({headers: headers});
return this.http.post(APIUrl+"/login", body, options).map(res => res.json());
}

Related

I'm having a CORS Prefetch Error 400 Bad Request

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...
}
}

asp.net webapi 2 post parameter values always null(string) or 0(int)

Been through dozens of links which all say the same solution.
Create an object for the parameter in the api call. And pass that exact same object using json.
So API call is thus (which is hit):
[System.Web.Http.HttpPost]
public Microsoft.AspNetCore.Mvc.JsonResult SearchItems([FromBody]SearchParams searchParams)
Input object is defined thus:
public class SearchParams
{
public string searchWord { get; set; }
public int anid { get; set; }
}
Call is made thus:
let item = {
searchWord: searchKeyword.value.trim(),
anid: 1
};
const uri = "../../WebApi/SearchItems";
fetch(uri, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify(item),
//credentials: 'include',
mode: 'cors',
})
Look at the network traffic, headers passed are thus:
:authority: localhost:44386
:method: POST
:path: /WebApi/SearchItems
:scheme: https
accept: application/json
accept-encoding: gzip, deflate, br
accept-language: en-GB,en-US;q=0.9,en;q=0.8
content-length: 32
content-type: application/json
cookie: .AspNetCore.Session=CfDJ8LGmdU3gpbZIvSkveH0x8cMT8VibUQlc07yQ8SJOo6DJkNqykRsAz2V6NVuQ5zQhzBNiHjZ2iRJc%2Fno44sQdQJhsVPnktzx8EWu%2Bptg9ONjmErDP3TZ1csme%2FAJ3H5hSgvooxH0snE00och2ov4ZldFCosHYGH6X70ESjL8PbcJg; .AspNetCore.Antiforgery.Q2hy0CiNRlg=CfDJ8LGmdU3gpbZIvSkveH0x8cOOBFRZOyah2508xPXIUjTbV_weFLdM06pME-M-kc2l48FOmSym_5JS9GUHJeciQEKJI9SHBu1D-5wLcVF4de3rYsjKRsI67qGrCado7eBFDBAbeYFOLWEMbXXCQr_0vlA
origin: https://localhost:44386
referer: https://localhost:44386/lb_users/Details/11
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: same-origin
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36
Payload is thus:
{"searchWord":"qwerty","anid":1}
Both my VS debugger AND Postman brings back null/0 values.
Relatively new to .net core.
So what fundamental thing am I missing here as the dozens of SO questions I've looked at all seem identical to what I've added to my solution?
Thanks in advance.
EDIT:
this works.
const uri = "../../WebApi/SearchItems";
fetch(uri, {
method: 'POST',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: "searchWord=" + searchKeyword.value.trim() + "&anid=1",
//credentials: 'include',
mode: 'cors',
})
So it would appear the JSON is the issue.
Have JSON objects been dropped from being passed to api calls?
I test asp .net webapi2 and asp .net core,both can work.
Here is a demo of asp .net webapi2:
ApiController:
public class ValuesController : ApiController
{
[System.Web.Http.HttpPost]
public string GetVal(SearchParams searchParams)
{
return "success";
}
}
public class SearchParams
{
public string searchWord { get; set; }
public int anid { get; set; }
}
ajax:
<input id="searchWord"/>
<button onclick="sendData()">ssss</button>
<script>
function sendData() {
let item = {
searchWord: $("#searchWord").val().trim(),
anid: 1
};
const uri = "../api/Values";
fetch(uri, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify(item),
//credentials: 'include',
mode: 'cors',
})
}
</script>
headers:
:authority: localhost:44383
:method: POST
:path: /api/Values
:scheme: https
accept: application/json
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9,zh-CN;q=0.8,zh;q=0.7
content-length: 33
content-type: application/json
cookie: .AspNetCore.Culture=c%3Den-US%7Cuic%3Den-US; .AspNetCore.Antiforgery.I5tvYLHG_pU=CfDJ8AkZmG9N6OhEnYVb3Xy31rQgFnXqHPkWTaV4nUodZGM9SfyhvD5jztl-kzo768oHkGPUYV-bOoSNBP5OuTHO_yd08w-IxrsO39HceHJgOIqC5ePYLIxXd0w9cBzYeWEu5amihQhOqiLySw376bp9YdM
origin: https://localhost:44383
referer: https://localhost:44383/Home/Index1
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: same-origin
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.66 Safari/537.36
paylod:
{searchWord: "hghgfgf", anid: 1}
result:
You can also try to create a new project,and test it.

Unable to read request body ( IdentityServer 4 )

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.

.NET Web API 2 with CORS and Angular Not Working on First Post

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.

Web api and Angularjs authentication failure

I try to make authenticated request to a WebApi server, using angular.
This is how I make the request:
var config = {headers: {Authorization: "Bearer " + JSON.parse($cookies.token)}};
var url = 'http://localhost:53889/api/Values/5';
$http.get(url,config).success(function(response){
console.log(response);
})
And this is how I set the authentication:
login: function(credentials){
return $http({
method: 'POST',
url: url + '/Token',
headers: {'Content-Type' : 'application/x-www.form-urlencoded'},
transformRequest : function(obj){
var str = [];
for(var p in obj){
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
}
return str.join("&");
},
data: credentials
});
var success = function(data){
AuthorizationFactory.setCurrentUser(credentials.username);
ApiFactory.init(data["access_token"]);
$cookieStore.put('token', JSON.stringify(data["access_token"]));
};
The success method is called like this: AuthorizationFactory.login(credentials).success(success).
But everytime I try to make a authenticated request, I get a 401 error message.
The headers look like this:
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:ro-RO,ro;q=0.8,en-US;q=0.6,en;q=0.4
Authorization:Bearer "4N_9ScOCtFxTgNs....t"
Cache-Control:no-cache
Connection:keep-alive
Cookie:.AspNet.Cookies=Rx...y0OTHrvE
Host:localhost:53889
Pragma:no-cache
Referer:http://localhost:53889/app/
User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.94 Safari/537.36
X-Access-Token:"\"4N_9ScO...XZ6t\""
What am I doing wrong? What I'm missing?
Do not use quotation marks in the Authorization header. It should look like this:
Authorization: Bearer your_token_here

Resources