Topic: CORS problen

Posted under e621 Tools and Applications

Hi, so this is my fist post here.

I'm trying to learn how to do a site and i'm having problems using the API here the error i get:

Access to XMLHttpRequest at 'https://e621.net/post/index.json?tags=pokehidden&limit=3' from origin 'http://localhost:7000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I'm using a npm like this:

{
  "name": "local_test",
  "version": "1.0.0",
  "description": "testing create site server",
  "scripts": {
    "prestart": "npm install",
    "start": "http-server -a localhost -p 7000 -c-1 --cors"
  },
  "author": "Scottibr",
  "license": "ISC",
  "dependencies": {
    "express": "*",
    "cors": "*",
    "http-server": "^0.11.1"
  }
}

And my code is this simple one:

<!DOCTYPE html>
<html>
    <head>
        <meta User-Agent: MyProject/ 1.0 (by Sstalker on e621, learning to make sites etc) >
        <meta Access-Control-Allow-Origin: * >
        <meta charset="utf-8">
        <title>JSON get external, test</title>
    </head>
    <body>
        <script>
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if(this.readyState == 4 && this.status == 200){
                    console.log(xhttp.responseText);
                }
            };
            xhttp.open("GET", "https://e621.net/post/index.json?tags=pokehidden&limit=3", true);
            xhttp.send();
        </script>
    </body>
</html>

Updated

This is intentional, otherwise people could throw up a website to make people do things they shouldn't.
If you need to get requests, you should proxy the requests.

Updated by anonymous

Chaser said:
This is intentional, otherwise people could throw up a website to make people do things they shouldn't.
If you need to get requests, you should proxy the requests.

yeap, the problem like I said is that i'm new on that, I dont know how to do it, I start looking tutorials on internet like las month, I just learned some html, java script and angular, how do I properly do this prox in the request?

Updated by anonymous

You need to make a separate client inside your server code that will get contacted from your app to do the requests. Obviously with the right credentials and user agent set beforehand.

Browsers usually prevent a site contacting another site. Y'know, forbidding a site to access another site's data. Images are usually exempt of this.

Also, I haven't worked with AngularJS but my gut tells me those first two <meta /> tags should be

<meta name="User-Agent" content="MyProject/ 1.0 (by Sstalker on e621, learning to make sites etc)" />
<meta name="Access-Control-Allow-Origin" content="*" />

Updated by anonymous

Xch3l said:
You need to make a separate client inside your server code that will get contacted from your app to do the requests. Obviously with the right credentials and user agent set beforehand.

Browsers usually prevent a site contacting another site. Y'know, forbidding a site to access another site's data. Images are usually exempt of this.

Also, I haven't worked with AngularJS but my gut tells me those first two <meta /> tags should be

<meta name="User-Agent" content="MyProject/ 1.0 (by Sstalker on e621, learning to make sites etc)" />
<meta name="Access-Control-Allow-Origin" content="*" />

Yeeeap, is not the fist time some one tells me that if I do it in the server side I wont have that problem but I was avoiding it cause i didn't want to need to learn a new language, I just started learning java script, angular and html.

But I tried all the other methods to avoid this CORS problem but noting work well, I will look for some server side language tutorials and try it.

About the <meta> I don't know to, some places I see using only <meta> and others use <meta/>, but I think I will try focus on solve it using server side and then if I cant solve it this way I will be back here to beg for help lol.

any way thx for the help <3

Updated by anonymous

  • 1