Develop Reference

CORS policy problem in react js client side

I created a Formik login form and call to react js fetch method. Add cors in web api end and successfully run in Postman and jquery. How to call "token_type": "bearer", through react js? cors is also enabled in web api and also generate Token successfully. How to call this url https://localhost:44323/token through react js?
My code is
onSubmit={(values) => {
fetch('https://localhost:44323/token', {
method: 'POST',
header: { 'Content-type': 'application/json,multipart/form-data' },
data: JSON.stringify(values)
})
.then(r => r.json())
.then(res => {
console.log(res)
});
}}>
Error messages

The root cause of the problem can be found in the following error message shown:
"Access to fetch at https://localhost:44323/token from origin http://localhost:3000 has been blocked by CORS policy. No Access-Control-Allow-Origin header is present on the requested resource ...."
How to fix the problem?
The problem can be fixed in these ways:
1. Allow the origin (http://localhost:3000) on the server (Recommended)
This can be done by adding the following header to HTTP response on the server side:
Access-Control-Allow-Origin: http://localhost:3000
2. Send Fetch request in the 'no-cors' mode
This can be done by updating the fetch request as follows:
fetch( 'https://localhost:44323/token',
{
method: 'POST',
mode: 'no-cors',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
}
)
.then(response => {
// Code for processing the response
}
)
.catch((error) => {
// Code for handling the error
}
)
More information:
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

401 error when performing GET request w/ axios

I can view my JSON data in my browser but not in my console. I'm not super familiar with axios, but I think the problem is with the url (see snippet below). That, or I'm missing something within axios.get {.
Any thoughts?
server.js:
axios.get("https://handshake.[redacted].com/HandshakeWebServices/Odata/Odata.ashx/HS[redacted]?hsf=#UserName=%27[redacted]%27&$select=PreferredName,Initials,JobTitle,Office", {
crossDomain: true,
method: "GET",
credentials: "include",
mode: "no-cors",
headers: {
"Accept": "application/json; odata=verbose"
}
})
.then(function(res){
console.log(res.data);
})
.catch(function(e){
console.log(e);
})
console:
GET https://handshake.[redacted].com/HandshakeWebServices/Odata/Odata.ashx/HS[redacted]?hsf=#UserName=[redacted]&$select=PreferredName...etc 401 (Unauthorized)
server.js?1d69:18 Error: Request failed with status code 401
at createError (createError.js?2d83:16)
at settle (settle.js?467f:18)
at XMLHttpRequest.handleLoad (xhr.js?b50d:77)

The site is returning a 401 which means you are not authorised to access the URL.
Normally, this means you need to send credentials.
Now, you've said credentials: "include", but that's a property recognised by fetch, not axios. The axios equivalent is withCredentials: true, so set that instead.
You've also said mode: "no-cors", which is another property recognised by fetch, not axios. You don't want it anyway. Sending credentials requires permission via CORS, so by rejecting CORS, reject the possibility to get permission to send the credentials.
Remove that property.

Post request using axios fails with "Response for preflight is invalid" error

I made the following post request to a 3rd party api, from my web frontend, using axios, but it couldn't go through.
Axios({
method: 'post',
url: 'https://some.website.com/oauth/token',
data: {
client_secret: 'revmisodtoire43-00j232onfkdl',
code: '54728349765905473289',
grant_type: 'authorization_code'
}
})
.then(res => {
console.log('client info: ', res);
});
The error says:Failed to load https://some.website.com/oauth/token: Response for preflight is invalid, and then network error.
When I made the same request via curl, it went through with no problem.
I know this is CORS related, but am not sure what to do with it. Any suggestions?

Check whether content-type is being added in the header's, if not try adding this
'Access-Control-Allow-Origin': '*' in the request headers

react + redux - 401 - unauthorized - missing headers in Request Headers

return fetch(`{SERVICE API URL}`, {
method: 'GET',
headers: {
'userName': "username",
'password': "password",
'content-type': 'application/json'
}
})
.then(response => response.json())
.then(json => dispatch(receivePosts(reddit, json)))
I'm trying to get service API data with authorization headers, but getting 401 - Unauthorized error and the response is Missing Request Headers.
Tried with sending authorization content with body also - getting same error 401 - Unauthorized error.
Edited:
headers: {
'userName': "xyz",
'sessionToken': "xyz................."
}
When I'm checking with Postman client it is working fine, but not with the redux-saga fetch method. Kindly help me for this.

Looks like it's a backend problem - CORS Filter configuration
If the backend is on a different server (could be on the same machine, but in a different Application Server, in other words, on a different port) you have to do some CORS Filters configurations.
The frontend code is running on a server - that means it's an application. Postman is a client, just like Google Chrome or any other browser. That's the explanation why you can do the request without any problem from Postman but unsuccessful from your frontend application.
I guess you enabled the Access-Control-Allow-Origin header on the backend
Now you have to allow your custom headers with Access-Control-Allow-Headers

Whenever I use fetch and I need to add headers to the request I do it this way:
headers: new Headers({
Accept: 'application/json',
Authorization: token,
'Content-Type': 'application/json',
}),
so you might want to try this approach, also in order to debug this issue you might want to check your Netowrk tab and verify which headers are sent with the request.

You need to add an Authorization bearer header.
For instance:
headers = new Headers({
'Authorization': `Bearer ${authorizationCodeOrCredentials}`
});
In your code:
return fetch(`{SERVICE API URL}`, {
method: 'GET',
headers: {
'Authorization': 'Bearer ' + someValue, // Add this line
'userName': "username",
'password': "password",
'content-type': 'application/json'
}
})
.then(response => response.json())
.then(json => dispatch(receivePosts(reddit, json)))

If you are using Linux system & If you have chrome in it...
Run your chrome using following command
/opt/google/chrome/chrome --disable-web-security --user-data-dir
Try now, If everything works fine then it's CORS issue from Backend.

$.ajax -- put method, sending OPTIONS

I have the following code:
function test(segmentId) {
var url = "http://...../api/avoidsegments/123456";
$.ajax({
url: url,
type: "PUT",
contentType: "application/json",
data : {
"appID": ig_appID,
"clientCode": ig_clientCode,
"segmentID": segmentId
},
success: function(output) {
console.log(output);
},
error: function(err) {
console.log('error: ', err);
}
});
}
I'm getting the following response:
OPTIONS http://...../api/avoidsegments/123456 401 (Unauthorized)
(index):1 XMLHttpRequest cannot load http://...../api/avoidsegments/123456.
Response for preflight has invalid HTTP status code 401
How do I fix this, and send a put request? Thanks.

You are trying to do Cross Origin HTTP Request (CORS). Solution is to enable CORS on your server side and as i can see u got 401 unauthorized so send Authorization header with requests (i dont know your authorization implementation).