I am using the standard cloud API for Jira and having troubles using their API to create an issue. I have tried both basic and token auth, both with the same CORS error.
I have followed the steps listed in these documents (here and here) and can get the API working in Postman, but not in my React code. I believe this has to do with Postman not sending the preflight options with the request.
Here is a sample of my request with basic auth:
fetch(`https://{DOMAIN}.atlassian.net/rest/api/3/issue/`, {
method: "POST",
credentials: 'include',
headers: {
"Content-Type": 'application/json',
"Accept": 'application/json',
"Authorization": "Basic {ENCODED USERNAME/PASSWORD}"
},
body: JSON.stringify(data)
})
.then(...)
Here is a sample of my request with token:
fetch(`https://{DOMAIN}.atlassian.net/rest/api/3/issue/`, {
method: "POST",
credentials: 'include',
headers: {
"Content-Type": 'application/json',
"Accept": 'application/json',
"Authorization": "bearer {TOKEN}"
},
body: JSON.stringify(data)
})
.then(...)
Does anyone know how to overcome this CORS error with Jira Cloud API? I found this article but would assume the issue has been resolved: https://jira.atlassian.com/browse/JRACLOUD-30371
UPDATE
Could not get this working via basic auth, however the newer OAuth 2.0 is working (only for GET requests).
Follow updates on this stack overflow question: JIRA Cloud REST API (OAuth 2.0) Error 403 on POST Requests
Related
this is the code
HERE this is giving me the cors error. i also added the allow access origin header but the issue is not solved
let headersList = {
"Accept": "*/*",
"User-Agent": "Thunder Client (https://www.thunderclient.com)",
"api-key": "U5H4A6FcMbEuZ33LP0ACQHP0ydkXkGLLJnDfNzQzCXTpzxL8QdJ8tH7NocITeZvv",
"Content-Type": "application/json"
}
let bodyContent = JSON.stringify({
"collection":"users",
"database":"college",
"dataSource":"Cluster0",
"projection": {}
});
let reqOptions = {
url: " https://data.mongodb-api.com/app/data-tfdur/endpoint/data/beta/action/findOne",
method: "POST",
headers: headersList,
body: bodyContent,
}
axios.request(reqOptions).then(function (response) {
console.log(response.data);
})```
At this time, the MongoDB Data API does not support browser requests as CORS is not implemented.
There is a support page where you can vote to let them know the importance of this feature:
MongoDB: Please Support CORS from the Data API
There are different ways to make a REST call in react-
e.g
axios.post('link', JSON.stringify(data1),
{
headers: {"content-type" : "application/json", "Access-Control-Allow-Origin" : "*"}})
.then(response => {
console.log("res:", response)
})
.catch(err =>{
console.log(err)
})
}
OR
fetch('http://localhost:8080/feedbacks/addfeedback', {
method: 'post',
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin' : '*'
},
body:body
What is the most effiecient way to enable CORS.
Is there any other way that I can do this either in frontend or backend?
It depends on what HTTP library you are using.
See What is difference between Axios and Fetch?.
I usually use Axios, next what i do is creating a global instance and configuring Axios once.
export const api = axios.create({
baseURL: '_URL_',
timeout: 1000,
withCredentials: false,
responseType: 'json',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*' // whatever you want
}
});
// You can add common headers later
api.defaults.headers.common['Authorization'] = `Bearer ${token}`;
Also i'm enabling CORS on my server side application.
Thanks to #henrik123 for good explanation:
The browser is going to see that some Javascript request has tried to initiate a request to a different domain, subdomain or port than what the browsers is currently at. If any of these things are different, the CORS kicks in. Doesn't matter if you use Axios, Fetch or any other other library
I'm using React and the fetch API to do a POST request to a user authentication backend. I can do this POST request below with Postman, and I get the correct JWT back, but oddly - whenever I use the following code in React, the POST request somehow hits the server as a GET request.
Code in React:
return this.fetch('http://fakeURL.com/auth', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
"email": "email#email.com",
"password": "password",
})
}).then(res => {
this.setToken(res.token);
return Promise.resolve(res);
})
The logs show (first the pre-flight request):
Request URL: http://fakeURL.com/auth
Request Method: OPTIONS
Status Code: 200 OK
Referrer Policy: no-referrer-when-downgrade
And the actual request:
Request URL: http://fakeURL.com/auth
Request Method: GET
Status Code: 405 METHOD NOT ALLOWED
Referrer Policy: no-referrer-when-downgrade
Things I've tried:
Running the app both locally and in an AWS S3 bucket (with CORS configured to allow all methods, and from any origin)
Using Flask on our backend to enable CORS
Hitting our backend via Postman with the same API POST request (when we use Postman, the API request works as intended, as a POST that returns a token)
Hitting other URLs (e.g. http://httpbin.org/post) to see if my code can hit those endpoints with a POST rather than a GET... and those endpoints see GET requests as well (instead of the intended POST)
This is so confusing - what could possibly cause our POST request to go out as a GET request? I feel like we've eliminated every possibly cause outside of something weird happening in React. Thanks for the help!
npm install --save axios
on your auth page:
import axios from 'axios'
Modify your post so instead of using fetch:
login(emailValue, passwordValue) {
return axios({
url: `yourAuthURL`,
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
data: {
"email": emailValue,
"password": passwordValue,
}
}).then(res => {
console.log(res);
})
}
I want to send this type data in raw text format using react native. please help-
submit Qsubmit_form=1&form_noresubmit_code=1525265560&question=OKKKK NEW APPP&submit=
You can use fetch API for both GET and POST requests. Example of POST request:
fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
}),
});
You can check out official docs for networking here
I cannot get the fetch api to work with the mailchimp api in React. I'm also using webpack to run a devserver.
This is what I have:
componentDidMount() {
let authenticationString = btoa('123:myapikey-us17');
authenticationString = "Basic " + authenticationString;
fetch('https://us17.api.mailchimp.com/3.0/lists/fakelistid/segments', {
mode: 'no-cors',
method: 'GET',
credentials: 'same-origin',
headers: new Headers({
'Authorization': authenticationString,
'Accept': 'application/json',
'Content-Type': 'application/json'
})
}).then(function(e){
console.log("fetch finished")
}).catch(function(e){
console.log("fetch error");
})
}
I've tested the exact same api request in Postman and that works fine.
When I try this in React I keep getting a 401 status code saying "Your request did not include an API key."