Welcome Guest ( Log In | Register )


Bump Topic Add Reply RSS Feed New Topic New Poll

Outline · [ Standard ] · Linear+

> CORS block my request even when the file is local

views
     
TSBetfairTrader
post Mar 26 2019, 11:17 AM, updated 2 months ago

Getting Started
**
Group: Junior Member
Posts: 115

Joined: Jan 2016
so this is my code

CODE

<html>



<canvas id="canvas" width = 500 height = 500  /></canvas><br>


<script>


var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image()
img.src = "DubBMAbWsAE05-6.jpg";

img.onload = function() {
ctx.drawImage(img,0,0);

var x = ctx.getImageData(0,0, 500,500)
console.log(x.data.length)


console.log("finish")

}




</script>


</html>




Note that DubBMAbWsAE05-6.jpg is a picture in the same folder of this html file and i get the error

Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
at Image.img.onload


But what origin does the browser want ? the image already in the same folder with the html file.

I went online and find solution and i added this line

CODE
 img.crossOrigin = "Anonymous";


thing got even worse, the image wont even load it gives errorr "Access to image <url> from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https"


prozac88
post Mar 26 2019, 11:53 AM

Getting Started
**
Group: Junior Member
Posts: 176

Joined: Nov 2004


lol this is not stackoverflow bro
bumpo
post Mar 26 2019, 03:11 PM

Casual
***
Group: Junior Member
Posts: 325

Joined: Mar 2013


i assume you run it be double clicking the html right?
when you do it like that, relative link are translated as protocol file:// which is what the browser scolding you about cors
TSBetfairTrader
post Mar 26 2019, 03:13 PM

Getting Started
**
Group: Junior Member
Posts: 115

Joined: Jan 2016
QUOTE(bumpo @ Mar 26 2019, 03:11 PM)
i assume you run it be double clicking the html right?
when you do it like that, relative link are translated as protocol file:// which is what the browser scolding you about cors
*
erm.... so what should i do?

actually what i did is i uploaded everything to my web host space , on server side everything is ok liao.

but for testing purpose i still prefer to do it on my local pc la..

This post has been edited by BetfairTrader: Mar 26 2019, 03:14 PM
bumpo
post Mar 26 2019, 03:21 PM

Casual
***
Group: Junior Member
Posts: 325

Joined: Mar 2013


QUOTE(BetfairTrader @ Mar 26 2019, 03:13 PM)
erm.... so what should i do?

actually what i did is i uploaded everything to my web host space , on server side everything is ok liao.

but for testing purpose i still prefer to do it on my local pc la..
*
if testing with a web server locally isnt an option, you need to beat your browser into submission so it wont complain about cors.
how to choke hold your browser into submiting to cors
wKkaY
post Mar 26 2019, 07:09 PM

misutā supākoru
Group Icon
Group: Admin
Posts: 5,894

Joined: Jan 2003
Just run a webserver on your PC and be done with it.
turnmoil
post Mar 27 2019, 10:20 AM

Casual
***
Group: Junior Member
Posts: 363

Joined: Jan 2003
From: The Miau Miaw Niau Miow Land


try using localhost first see how it goes.. like wKkay mention
Lord Tiki Mick
post Mar 27 2019, 01:13 PM

Enthusiast
*****
Group: Senior Member
Posts: 914

Joined: Jul 2012
QUOTE(wKkaY @ Mar 26 2019, 07:09 PM)
Just run a webserver on your PC and be done with it.
*
This.

I'd usually do "python3 -m http.server"



Bump Topic Add ReplyOptions New Topic
 

Switch to:
| Lo-Fi Version
0.0588sec    0.98    5 queries    GZIP Disabled
Time is now: 21st May 2019 - 04:45 AM