从 Javascript 获取数据

Question

How can I get data from a server with no 'Access-Control-Allow-Origin'? I can get an Opaque answer only.

Problem is that I need to call a public API on a server with no Access-Control-Allow-Origin - I can try to convince site owner to add it, but how do I do it in the meantime? I am trying to not run a proxy on my own domain. The data is personal data (electric power consumption), which I want the browser to download and process, and I do not want my server to see the users private API key, which is stored in localStorage only. At some point I want to it to become a true web app.

Fetch with no-cors mode gives me Opaque data, and with cors enabled I get: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.eloverblik.dk/ . (Reason: CORS header 'Access-Control-Allow-Origin' missing)

Any other way to call an API / Get data from a 3rd party site on the web?

Here is example code:

fetch( 'https://www.eloverblik.dk', { method: 'GET', redirect: 'follow'})
.then( (response) => { console.log('x'); console.log('Resp: ' + response.type) })
.then((result) => { console.log('Res: ' + result )})
.catch( (error) => { console.error('Error:', error); }) 

Answer 1

Override window.fetch()

Until the CORS header is added you can implement your own fetch() function, which answers directly in prepared JSON objects.
There is no other workaround unless you have a proxy server, which you wrote isn't an option to you.

There is no other direct way to talk to the other server. A custom browser which ignored the CORS headers would be a security concern and also not realistic, since your visitors will of course have the default security enabled.

Having a fake implementation also comes in handy when testing your code, so might be a good idea anyway to implement a mock API, which gives the same results every time.

You can override window.fetch simply by assigning a different function to it. See an example below.

You can of course split the routing and responses into different files to organize your test implementation better. But let's get to the example snippet:

 // Mock implementation of fetch() to talk to the API window.fetch = function(uri, params) { console.log("fetch() debug implementation called.", uri, params); switch(params.method) { case "GET": if (uri.match(/eloverblik.dk\/?$/i)) { return { type: 'any type you want' }; } else if(uri.match(/eloverblik.dk\/users\/?$/i)) { return { type: 'whatever the API says', response: [{id: 1, name: 'admin'}] }; } break; case "POST": //... break; } }; let res = fetch('https://www.eloverblik.dk', { method: 'GET', redirect: 'follow'}); console.log(res);

Answer 2

Thanks for the help here.

Basically, the answer is, that it is not possible.

The workaround is to use a reverse proxy like nginx and add the header.

I have contacted the site owner and asked them to add the header. It is a public available API, that requires login with an API key you can generate on a website.

They do run another api server, giving anonymous access to public data. That one is run on cloudapp.net. The one where they "forgot" the header has personal electricity consumption measurements - Down to 15m intervals. It is hosted under t-msedge.net. Hope they will do the change, so I can do away with the proxy.