This is my template code:
<croppa
v-model="croppers[i]"
placeholder="Select Image"
initial-size="contain"
:placeholder-font-size="25"
:show-remove-button="false"
:initial-image="initialImages[i]"
></croppa>
This my script to update initial image values for each cropper.
for (i = 0; i < 6; i++) {
this.croppers[i].refresh()
this.imageNames[i] = ''
if (this.editProductFlag && (typeof this.productDetails.images !== 'undefined')) {
if (typeof this.productDetails.images[i] !== 'undefined') {
this.initialImages[i] = this.productDetails.images[i].image
this.imageNames[i] = this.productDetails.images[i].description
}
}
}
This is the error I am getting
Access to image at 'https://dev-pickl-img-static.pickl.pro/product_images/145/good_day5c3104b49e69b.png' from origin 'https://dev-app.pickl.pro' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I have tried tag also with crossorigin="anonymous" but still its not working.
Can anyone please help me with this issue?
No, CORS requests do not work as you can think.
You must check the documentation of your image provider and see if there is an option to enable CORS requests, otherwise will never be able to get the images from the frontend.
Related
In my project, when the web browser submits a hx-delete request, and the backend determines the user doesn't have the required permissions for that request, the backend returns a full 403 error page. By default HTMX ignores this response. I would like HTMX to instead display the full 403 error page.
How can I do this?
I solved my problem by adding this code to the page.
/***
* Swaps in the body of error pages returned from htmx requests
*/
document.addEventListener("htmx:beforeOnLoad", function (event) {
const xhr = event.detail.xhr
if (xhr.status == 500 || xhr.status == 403 || xhr.status == 404) {
event.stopPropagation() // Tell htmx not to process these requests
document.children[0].innerHTML = xhr.response // Swap in body of response instead
}
})
i use open layer map with mvc project ,
with cdn :
<script src="https://www.openlayers.org/api/OpenLayers.js"></script>
while i need to get location i have function
getlocation
function getLocation() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var loc_obj = JSON.parse(this.responseText);
if (loc_obj) {
usersLocationUpdated(loc_obj.latitude, loc_obj.longitude, loc_obj.added_time, loc_obj.located_time);
} else {
if (!mapLayer) {
mapLayer = new OpenLayers.Map("myMap");
}
markers = new OpenLayers.Layer.Markers("Markers");
mapLayer.addLayer(markers);
}
}
};
xhttp.open("POST", "../api/tracking/....", false);
xhttp.send();
}
the map working well in browser chrome
as appears in image :
but in IE,Edge and safari the map appears as image attached
when check console in failing browser (Edge and safari)
i have the error :
[CORS] The origin 'My web site ' did not find 'My web site '
in the Access-Control-Allow-Origin response header for cross-origin image resource at 'http://b.tile.openstreetmap.org/16/38663/27093.p'
i try many solution with send request as :
xhttp.setRequestHeader('Access-Control-Allow-Origin', '*');
xhttp.setRequestHeader("Access-Control-Allow-Headers","*");
xhttp.setRequestHeader('Access-Control-Allow-Credentials', true);
Any help . !
OSM is CORS enabled but most browsers will reject CORS from an http url if the application is running on a https site. OpenLayers 2 defaults to an http address for OSM so try specifying it with an https address
new OpenLayers.Layer.OSM(
"OpenStreetMap",
["https://a.tile.openstreetmap.org/${z}/${x}/${y}.png",
"https://b.tile.openstreetmap.org/${z}/${x}/${y}.png",
"https://c.tile.openstreetmap.org/${z}/${x}/${y}.png"]
)
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)
I have tried searching for a relevant answer for this one on all forums , but nothing actually has worked for us as yet. Appreciate if someone can actually help us in this regard as we have an impending release in a few days
We have created a WinJS based windows desktop app which is consuming Oracle SOA based web services (http based) over VPN / or a dedicated APN configuration
whenever we try to access the services we get a Status 0 as return value for xhr ( which is i assume related to response is null ) & get this in the
WinJS.xhr: Network Error 0x2efd, Could not complete the operation due to error 00002efd
We tried using various suggested options like allowing Private Network in the manifest file ( assuming this is a CORS issue) , but to no avail
"Private Networks (Home & Server)"
<Capabilities>
<Capability Name="internetClient" />
<Capability Name="privateNetworkClientServer" />
</Capabilities>
We have been working around using Fiddler (loopback option) but that's just temporary , can someone suggest ,what we might be missing or given their experience tell us what could be wrong with our approach.
Any help is really appreciated.
Background
WinJS.XHR returns response.status === 0 when you don't have access to the Internet. Unfortunately this is treated like a success in WinJS 3.0:
if ((req.status >= 200 && req.status < 300) || req.status === 0) {
schedule(c, req, priority);
} else {
schedule(e, req, priority);
}
In WinJS 4.x they changed the condition, so that it :
if ((req.status >= 200 && req.status < 300) ||
(req.status === 0 && options.url.substr(0,7) === 'file://')) {
schedule(c, req, priority);
} else {
schedule(e, req, priority);
}
and more recently in 4.4:
if ((req.status >= 200 && req.status < 300) || (isLocalRequest && req.status === 0)) {
schedule(c, req, priority);
} else {
schedule(e, req, priority);
}
See: https://github.com/winjs/winjs/commit/8d44a3ee4105aa05fb69cd82943b9c07500bf523
This means that on your success promise callback you will receive an empty response.
WinJS.XHR({[...]}).then((response: XMLHttpRequest) => {
// Here response.status === 0 instead of error in the error handler!!!
}, (error) => console.log(error));
Solution
Use Charles Proxy (maybe Fiddler doesn't show responses right) to see what is happening behind the scenes with your request. Most likely fails.
Depending on your version of WinJS use:
a. success handler and output the response when response.status ==== 0
b. error handler and same as above.
//
Blockquote I am trying to access the json contents through a Web API. I can access the contents but for some reason it gives me errors
: "no 'Access-Control-Allow-Origin' header is present on the
requested resource. Origin 'http://localhost' is therefore not allowed
access." Now it means that I have to enable some how the CORS or by
moving the contents to the same domain.
I am not sure if I have to enable it On a: Origin Server (Requesting)
in this case localhost b: On the external server OR c: I have to set
up some code in my ajax call
Please advise and guide to right content as I am a bit of ******* in
this regard.
<script>
jQuery(document).ready(function() {
jQuery('#34f8l4frywio').change(function(){
if((jQuery("#34f8l4frywio").length < 0) || (jQuery("#vnkt3fpocr10").length < 0)){
}else{
var newserial = jQuery("#34f8l4frywio").val();
var newmodel = jQuery("#vnkt3fpocr10").val();
jQuery.ajax({
url : 'http://example.com/xmlrpc/serial_json.php?serial='+ newserial+'&model='+ newmodel + '&format=json',
dataType: "text",
contentType: "text/plain",
xhrFields: {
withCredentials: false
},
//here it fails and gives the error
success: function(data) {
var json = $.parseJSON(data);
jQuery('#6bun045yhogr').val(json[0].warranty);
jQuery('#34f8l4frywio').val(json[0].serial);
jQuery("#vnkt3fpocr10").val(json[0].model);
}
});
}
});
});
</script>
Refer Angular.js No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access
"Access-Control-Allow-Origin is set on the response from server, not on client request to allow clients from different origins to have access to the response."