CORS policy.

[GeorgeIvlev]

Hi! I have a question about making requests from frontend part. As i figured out https://www.tickspot.com/api doesn't return a 'Access-Control-Allow-Origin' header. API working fine if i send CURL request from terminal or use the backend. I want to implement ui on my frontend to be able make requests to API without backend, can you help me please with that question? Thanks!

Here is my code:

fetch('https://www.tickspot.com/api/v2/roles', {
    method: 'GET',
    headers: {
        'Access-Control-Allow-Origin': '*',
        'Content-type': 'application/json',
        'Authorization': 'Basic mytoken',
        'User-Agent': 'MyCoolApp (myemail)'
    }
})
.then(res => {
    if (res.ok)
        return res.json();

    throw new Error('An error has occured: ', res);
})
.catch(err => {
    console.warn(err);
});

[tomrossi7]

Hi @GeorgeIvlev! We'll mark this as an enhancement and will try and get it on the schedule.

[przemo-hemmersbach]

What's the status on this proposal?

[johnloringpollard]

I just deployed this change. Can you take a look now?

[przemo-hemmersbach]

Haven't yet made auth work for me.
Right now we use subdomain hosted instance (aka my-company-name.tickspot.com), and I can't do /roles.json request. Don't even really know if we have API enabled, or if it's enabled for all users.
Can you share some code snippet that I could just run to verify that CORS works?

Edit:
I also realized that CORS need to be set up on the server, so please attach instructions for admins as well.

[jhonatan-kmt]

Hi there, I'm having the same problem with the CORS error.
I use the v2 of Tick API, but, instead of fetch I used axios to create a client that consumes and retrieves information about Tick
I use the following headers options:

'Authorization' : 'Token token=mytoken',
'User-Agent' : 'tickspot.js (myemail)',

and try to add these additional headers and it doesn't work

'Access-Control-Allow-Origin': '*',
'Content-type': 'application/json',

Exists a solution or workaround for this issue? 🤔

[johnloringpollard]

Can anyone having this issue send me a full code snippet replicating the issue? Just remove the token and keep everything else the same. That would be great, thanks!

[jhonatan-kmt]

Hi @johnloringpollard,
To replicate this issue, in my case I used this code snippet in a basic React App

  axios.get('https://www.tickspot.com/xxxx/api/v2/projects.json', {
    headers: {
      'Authorization': 'Token token=mytoken',
      'User-Agent': 'MyCoolApp (email@mail.com)',
    }
  }).then(function (response) {
    console.log(response.data);
  }).catch(function (error) {
    console.log(error);
  }).then(function () {
    // always executed
  });

Or you can try Fetch with this code snippet

fetch('https://www.tickspot.com/xxxx/api/v2/projects.json', {
    headers: {
      'Authorization' : 'Token token=token',
      'User-Agent' : 'MyCoolApp (email@mail.com)',
    } 
  })
  .then((response) => console.log(response))

That is the CORS error received