I am using vue webpack template to develop application using vue js 2, I am using vue resource for ajax
this.$http.get('http://localhost:8081/test/station.json')
.then(response => {
console.log(response);
}, response => {
// error callback
});
but getting error "Failed to load http://localhost:8081/test/station.json: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access."
How to solve this
Apparently your url with the json file doesn't have any headers so the call is not allowed. So you have to set the header to content-type : application/json
Side note:
You should not use vue-resource because it is no longer supported by the vue team. You should use something like axios for making Ajax requests
Now I am using axios get request with header but getting same error, my code is below here
this.axios.get('https://feeds.citibikenyc.com/stations/stations.json',{
headers: {
'content-type': 'application/json'
}
}).then((response) => {
console.log(response);
}).then((error) => {
console.log(error);
});
Error is
Failed to load https://feeds.citibikenyc.com/stations/stations.json: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access
Related
My front-end is ReactJS (at port 3000) and my back-end is ROR (at port 3001). I'm trying to delete data by using axios:
axios
.delete('http://localhost:3001/problems/21')
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
but It didn't work. I was received the error:
Access to XMLHttpRequest at 'http://localhost:3001/problems/21' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I think that is not CORS error, because I used rack-cors gem in ROR source, and when I execute method POST or PATCH, they work perfectly. Only my method DELETE does not work.
I also checked the log of ROR and I saw the ROR didn't process when I call method DELETE with axios. Where am I wrong? And what should I do?
I use Ionic to build App, I would like post on API that I prepare I test
API using postman it works correctly
but when I use Ionic face an error 405 Method not allowed
this is the response for request:
{"Message":"The requested resource does not support HTTP method 'OPTIONS'."}
I got status 200 on postman but 405 using ionic
Postman:
This is my code:
var auth = 'bearer ' + Token;[enter image description here][1]
let headers = new Headers({
'Content-Type': 'application/json',
'withCredentials': 'true',
'Authorization': auth
});
return this.http.post('http://abdalrahmannada-001-site1.htempurl.com/api/Rabbit/AddRabbit', { headers: headers })
.map(response => response);
this problem relate to server side
you should want from admin server provider to enable http option for you
most hosting disable this for security
I am trying to send a post request to receive my access token from https://login.microsoftonline.com/common/oauth2/v2.0/token. When I tried this in my REST client, it works, but when I try to integrate it to my app, it sends me a error 400 Bad Gateway, with the message AADSTS90014: The request body must contain the following parameter: 'grant_type'. I tried searching for answers, and found out that I need to implement headers in my post request, so I did that, but it still won't work. Any ideas?
Http Imports:
import { HttpClient, HttpHeaders, HttpRequest } from '#angular/common/http';
Call to post request:
var url=this.outlook_authentification_endpoint+"token";
var query_parameters=JSON.stringify({grant_type:"authorization_code", client_id:this.outlook_client_id, code: this.outlook_user_code, client_secret: this.outlook_secret_key, redirect_uri: this.outlook_redirect_uri});
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/x-www-form-urlencoded'
})
};
this.query_service.postOutlook(url, query_parameters, httpOptions, (data)=>
{
console.log(data);
});
Call to the post function:
public postOutlook(url, query, headers, callback)
{
this.operation_pending=true;
this.http_client.post(url,query, headers).subscribe((data)=>
{
this.operation_pending=false;
callback(data);
});
}
Can anyone see where my error is?
You are using wrong OAuth2 flow (the way of getting tokens). You are using the Auth code grant, which cannot be used in browser applications, because you would have to keep your client secret in JavaScript, which means make it public. So you cannot access the /token endpoint either.
You should use the Implicit grant, which is designed for browser applications. Then you get tokens right into your Angular application without the need of going to the /token endpoint.
I'm trying to connect to an rss api provider 'Inoreader' and I'm using react native. I am able to get the authorization code but when I submit a post request for exchanging with tokens, I get 400 bad request. The response text is undefined. I checked and all their parameters are matching with my app's. I have tried.
This is their documentation: https://www.inoreader.com/developers/oauth
fetch('https://www.inoreader.com/oauth2/token', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Host': 'www.inoreader.com',
'Content-length': '217',
'User-Agent': navigator.userAgent,
'Content-type': 'application/x-www-form-urlencoded'
},
body: JSON.stringify({
'code':`${this.state.auth_code}&redirect_uri=${this.state.gizmos}&client_id=${this.state.userId}&client_secret=${this.state.userKey}&scope=&grant_type=authorization_code`
})
})
.then((res) => {
this.setState({
userName: res.access_token
});
console.log(res.status);
});
I see three problems in your code
You have a fixed Content-length value (217) from the Inoreader example. This way, the server reads just 217 characters of the request and the rest is discarded if the request is longer.
The request Content-type is urlencoded, but you probably don't URL encode the values. You can use the [encodeURIComponent()][1] function to do it.
The /token endpoint requires you to send a client secret, but your application cannot keep it safe, so the secret can easily get compromised. As they write in the guide, the request should be done from a backend. Or you can ask them to support OAuth2 for native apps.
Getting CORS error when I am making Ajax request to https://login.microsoftonline.com/common/oauth2/v2.0/token from my application.
Below is the code sample that I am using:
var inputData = {
'grant_type': 'authorization_code',
'code': '<codeValue>',
'redirect_uri': '<returnUrl>',
'client_id': '<client_id>',
'client_secret': '<client_secret>'
};
$.ajax({
url: 'https://login.microsoftonline.com/common/oauth2/v2.0/token',
type: 'post',
contentType: 'application/x-www-form-urlencoded',
dataType: 'application/json',
data: inputData,
success: function (data, text) {
console.log(data.access_token);
},
error: function (data, status, error) {
console.log('failed');
}
});
Browser console is showing below error:
Cross-Origin Request Blocked:
The Same Origin Policy disallows reading the remote resource at https://login.microsoftonline.com/common/oauth2/v2.0/token. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
I would like to know how to get ride of CORS error.
You shouldn't use the Authorization Code Flow to do client-size authentication. It would require that you provide the Client Secret as you're doing here and that is a big no-no.
If you need to handle authentication entirely on the client-size, you need to use the Implicit Flow (aka Client-Side Flow). This allows you to authenticate without passing a client secret and doesn't use a second-stage POST to obtain the token.
I wrote a walk through for how Implicit works that you might find helpful as well: v2 Endpoint and Implicit Grant