i'm new in vue.js
i wrote an method for posting data and get page address (get and post) like this
updateCategory() {
this.$eventBus.$emit("loadingStatus", true);
this.$axios.get("http://rimonbd.com/tutorial/api/update-category", this.clickedCategory)
.then(res => {
this.$eventBus.$emit("loadingStatus", false);
this.showingAddModal = false;
if (res.data.error) {
this.$iziToast.error({
title: 'Error',
message: res.data.message,
});
} else {
this.$iziToast.success({
title:'Succes',
message:res.data.message,
});
and i got this error :'(
Access to XMLHttpRequest at 'http://rimonbd.com/tutorial/api/get-category' from origin 'http://localhost:8080' 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.
how should i fix that ?
The website you're trying to request data doesn't allow requests from different domains. You're on localhost:8080 requesting data from and external website.
You can try
Use local data to test your project
Deploy your project under the same domain of your data.
Read more about CORS https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
Try a hack, only for tests, don't put this in production https://cors-anywhere.herokuapp.com/
example:
this.$axios.get("https://cors-anywhere.herokuapp.com/http://rimonbd.com/tutorial/api/update-category", this.clickedCategory)
Related
I'm trying to make a API REST Request but i can't connect with the api, i'd trying different options but i could do it.
This is my ts
post(emplead2){
let data = {
"LastName": this.LastName
}
this.proveedor.addStudent(data)
.subscribe(
(data)=>{this.empleados = data;},
(error)=>{console.log(error);}
)
}
this is my service
addStudent(data): Observable<any> {
const headers = new HttpHeaders().append('Content-Type','application/json');
const body = 'hola';
console.log(body)
console.log(headers)
return this.http.post('APIURL',body,{headers: headers});
}
this is the error
Access to XMLHttpRequest at 'MYAPIURL' from origin 'http://localhost:8100' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
The problem here is not from your ionic application or how you are sending the POST request. What is basically happening is that your http request is being blocked by CORS policy for security reasons. You can check here what exactly is CORS policy and why it is blocking your request.
Fixing this depends on the language/framework you built the API with, but what you need to do is allow your ionic application's base url (http://localhost:8100) to access the API and bypass the CORS policy.
I am going mental. So I have the code below. When I run it as is, I get
Access to XMLHttpRequest at 'URL' from origin 'http://localhost:8000' 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.
If I remove the CORS header I get the same error. I am not sure what I am doing wrong. I will tell you if I curl the URL it works fine. What am I missing here.
Also, I have tried this using both axios.get AND fetch so I am open to both solutions.
getRoomUserCount: function () {
return axios
.get('URL', {
responseType: "json",
});
},
What it SHOULD return is an array of data, then using the code below I grab the array
mounted: function () {
this.roomUserCount = this.getRoomUserCount();
},
CORS policy is ALWAYS server related. You cannot change anything on your client-side to change that.
Enable CORS on your server to fix this.
I have been trying to figure out how to get this Vue project to work with the Lyft API. I have been able to get an Auth Token successfully created from the three-legged procedure, but I am unable to get the available drive types https://api.lyft.com/v1/ridetypes endpoint from the localhost:8080. It does work on Postman.
It keeps stating:
Access to XMLHttpRequest at
'https://api.lyft.com/v1/ridetypes?lat=37.7752315&lng=-122.418075'
from origin 'http://localhost:8080' 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 had tried doing a proxy using a vue.config.js file:
module.exports = {
devServer: {
proxy: {
'/lyftapi': {
target: 'https://api.lyft.com/v1',
ws: true,
changeOrigin: true
}
}
}
}
I been around other parts of Stack Overflow, and this is the closest thing to my problem, but no answers.
CORS error in Lyft API started recently
Any suggestions?
Axios Get Call
axios.get('/ridetypes', {
baseURL: 'https://api.lyft.com/v1',
headers: {
'Authorization': this.lyftToken,
},
params: {
lat: lat.toString(),
lng: long.toString()
}
})
If it means anything, I am able to make successful GET calls to retrieve Uber products, but not so much the Auth Token (unless its from Postman).
Lyft-API has disabled CORS, this means that browsers will block calls to api.lyft.com.
Vue won't be able to do anyting about this as this is a browser security policy.
Luckily there is nothing from stoping you to make this call from your own server.
One solution is to forward the request and response using your own server. You make a call to your server, the server makes a call to lyft, waits for the response and then responds your request.
This is not a vue only solution.
I am trying to send email using aws-sdk's SES in my Angular application (Angular 5).
ses = new AWS.SES({
apiVersion: '2010-12-01',
accessKeyId:'<<access key>>',
secretAccessKey:'<<secretkey>>',
region: 'us-east-1',
endpoint: 'email-smtp.us-east-1.amazonaws.com',
sslEnabled: true
});
this.ses.sendEmail(this.params, function(err, data) {
if (err) {
console.log(err, err.stack); // an error occurred
console.log("Got error:", err.message);
console.log("Request:");
console.log(this.request.httpRequest);
console.log("Response:");
console.log(this.httpResponse);
} else {
console.log(data); // successful response
}
});
I am getting the below error.
Failed to load https://email-smtp.us-east-1.amazonaws.com/: Response
to preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:4200' is therefore not allowed
access.
I don't find a way to set the header values here.
There is one possible workaround to bypass the problem in local tests.
Using the chrome plugin https://chrome.google.com/webstore/search/access-contol-allow-origin.
I am working in an Angular app. I need to get a Json from the following url:
http://www.citibikenyc.com/stations/json
I tried using $http.get() and $http.jsonp()
When I do the following
$http.get("http://www.citibikenyc.com/stations/json")
.then(function (response) {
console.log(response.data);
});
I am getting the following error :
XMLHttpRequest cannot load [url that i use here].
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost' is therefore not allowed access.
When I do the following code:
$http.jsonp("http://www.citibikenyc.com/stations/json?callback=JSON_CALLBACK")
.then(function (response) {
console.log(response.data);
});
I am getting SyntaxError: Unexpected token :
Looks like the service/API you are trying to call doesn't allow you. What you are trying to do is cross-side scripting and is not allowed unless there is a CORS policy on the service that allows your domain. "http://localhost" is not a valid domain for this service.