CODEWITHSUNDEEP
typescriptservicestack
Jamil
Jamil

Reputation: 117

ServerStack TypeScript JsonServiceClient COR Issue

I am using ServiceStack TypeScript Client "JsonServiceClient" in my app. On a button click, I am writing these lines of code.

let client:JsonServiceClient = new JsonServiceClient('http://ams-device-int.azurewebsites.net/');
client.setCredentials('testacc', 'Tes@2020');
client.get('/SourceDevice?Take=10').then((r) => {
  debugger;
});

When this code executed, I got CORS issue in the dev console.

Access to fetch at 'http://ams-device-int.azurewebsites.net/SourceDevice?Take=10' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

I already check with the service developer, and CORS has enabled already to all origins and in fact, we have a web application running with AngularJS code and I am using $http over there, and it's working fine without any issue. I think I am missing something in this JsonServiceClient and it's not sending the correct credentials, which are causing the problem.

On the other hand, I have this code

const response = await fetch('http://ams-device-int.azurewebsites.net/SourceDevice?Take=10', {
    method: 'GET', // *GET, POST, PUT, DELETE, etc.
    //mode: 'same-origin', // no-cors, *cors, same-origin
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    //credentials: 'include', // include, *same-origin, omit
    headers: {
        'Content-Type': 'application/json',
        "Authorization": `Basic ${btoa('testacc:Tes@2020')}`
        // 'Content-Type': 'application/x-www-form-urlencoded',
    },
});
let res = await response.json();

and this is working fine. Please help me with what I am making a mistake.

Regards, Jamil

Upvotes: 1

Views: 117

Answers (1)

mythz
mythz

Reputation: 143389

Doesn't sound like the cross-origin server supports cookies, you can change the mode to use what your existing ajax requests uses, e.g:

let client = new JsonServiceClient(baseUrl);
client.credentials = 'omit';
client.mode = ‘cors’;
client.headers.set("Authorization",`Basic ${btoa('testacc:Tes@2020')}`);

Upvotes: 1

Related Questions