We Keep Coding

SPA: Access Instagram authentication code directly in app

I load user profile informations from instagram by the basic api in a local test app.
So this actually works like written in the documentations.
I used Postman to get along the authentication and token stuff.
The order to access the graph api, to query media fields would be like:
Get access code (from authentication window redirect url)
Get access token (from acces_token endpoint)
Get media data (from graph api by access_token)
I´m using UI5 js framework with UI5 Tooling.
I get a response with data in step 3 from ajax call, but first i have to execute step 1 and step 2 manually.
But i want to do all this authentication-mechanism directly in my app. Including opening this authentication window and acessing the code from the redirect url.
When i do an ajax call in step 1, i get an CORS error of course, because step 1 doesnt respond with the corresponding CORS header (like step 3 does).
Well, anyways i most likely could handle this by a proxy, but whats about the production environment? I dont get how this approach should ever work in a real app. Even when the CORS problems are handled by aproxy in dev environment, it should be still there when a real user uses the app.
So the question is: How can i access or implement this authentication window (on a diffrent origin) in my app? I have seen other apps doing this permission window, but i have no clue how to implement it in a web app.
By clicking "Allow" you get redirected to he redirect_url with the access code
How can i get the access code directly in my app, avoiding CORS in production

I don't have a definite answer, but regarding your CORS issue: It seems like instagram added a CORS policy somewhere last year (see this other question on SO). This means that you would indeed have to build a proxy.
Basically you need something that accepts all the endpoints that the original API accepts, forwards them to instagram, reads the response, and returns the response to the client (aka browser). But your proxy will then not add the CORS headers. Or even better, you add your own CORS headers (assuming your proxy and your app will run on the same server) and no one else will be able to use your proxy from their web app.
Unfortunately I don't know about this authentication window. Maybe this is just a fancy way to hide that they are running a proxy behind the scenes as well? You should be able to see in the network tab where the insta data is coming from after you login. I would guess not directly from their graph API.

Is there any npm library that can avoid getting blocked when web scraping

I'm making and android application that shows some results from Amazon. The app makes a request to a custom Express server that returns amazon results in a JSON via web scrapping (for example, https://www.amazon.com/s?k=nike). My server worked fine, but now it returns empty array. The exact same code works on my laptop, so I supose I'm getting blocked by amazon domain.
I know some things that i could make: change ip, crawl slowler, use proxies, rotate user agents, blablabla...
Is there any npm library that can avoid getting blocked when web scrapping? Maybe selenium?
For your information, i'm using the npm web scrapping module : unofficial-amazon-search

Permitting user agent (chrome) CORS requests programmatically

I need to get some data from external API, from other domain.
I use test app, runned on localhost and I get error:
Origin http://localhost is not allowed by Access-Control-Allow-Origin.
I try to get access to: https://api.coinmarketcap.com/v1/ticker/ by get method
I did a lot of search and:
I know that I can ask that API by using node.js, CURL, and also by running my frontend code in jest tests
By using chrome extension - https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en also everything works correctly
But unfortunatelly by simply AJAX request on my page load I can't reach that API and get an error.
And my prediction is that user agent (chrome) somehow block my request.
I can't use chrome extension because I want also access my website from my mobile phone which can't get that desktop extension.
For now my solution is "proxy", node.js server which can access that API and flow looks like:
FE
-- ASK BE -->
BE
-- ASK API -->
-- RESPONSE TO BE -->
BE
-- RESPONSE TO FE -->
FE SHOWS EVERYTHING
FE - Frontend, BE - Backend (node.js proxy), API - external API
But I want to avoid unnecessary code on the BE. Maybe there is some solution?
Like some magical header which will tell chrome to let me pass to external domain without any additional extension?

You are correct you cannot bypass the CORS rules unless you are using jsonp and the server in question supports it. When working with that ticker in the past I had to build a backend exactly as you describe with express.
FE => BE => Ticker => BE => FE

Well you can do that one clean way as described here - https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
Set the header value
Access-Control-Allow-Origin: *
with your response to the first page load from server.

If all you pages uses HTML5,you can try using Window.postMessage.
Another common solution is creating a proxy-server.

407 Proxy Authentication Required ( Forefront TMG requires authorization to fulfill the request. Access to the Web Proxy filter is denied. )

I have developed a website which uses Ajax POST using jQuery to a PHP server.
While it works perfectly when accessed from a web browser at home, some of my Ajax requests fail when accessed from a web browser on my day job's corporate network, and I get the following error shown by Firebug: 407 Proxy Authentication Required ( Forefront TMG requires authorization to fulfill the request. Access to the Web Proxy filter is denied. ). Note that Chrome does not show the error but it is still blocked, and IE11 blocks it as well but I haven't been able to view the message using Development Tools due to an unrelated issue (Error in jquery.validate.js in MVC 4 Project with jQuery 1.9).
I have no ability to modify anything on the corporate network, nor is it my desire to do so. My desire is to modify the HTML/JavaScript/Headers which my server provides to eliminate blocking of the request so others do not experience this issue.
What can be done?

This happens when you are using a complete url address in your html or jquery posts
e.g.
action="http://www.example.com/mydir/myfile.php"
Try changing the url reference so that it doesn't include the website address
e.g.
action="/mydir/myfile.php"
This also works when posting with AJAX/jquery
e.g. the code below produces the same error
var url1="http://www.example.com/mydir/myfile.php";
$.post(url1, function(data){alert(data);});
but this code doesn't
var dir1="/mydir/myfile.php";
$.post(dir1, function(data){alert(data);});
It is important to note that when you switch from the complete urls to the directories, you have to define your directory relative to your current file directory.

Iframes cannot display https on http site, breaks Google API

Information
I am writing a piece of code that will be going up on a web server that I do not have control over. This webserver does not have https. In this code I use the Google Javascript API. When I put in the example code with all the correct API keys and client ID's and whatnot I get a Protocols must match error on an iframe it tries to create to get OAth2 information.
This Protocols must match error is of course caused by the fact that the webserver is http and the OAth2 url it is using is https.
Main Question
Is there any way to use Google API's on a server that does not have https? Is it possible to shut off this Security feature and make the https OAth2 iframe work on a http server?
Note:
The Google API is creating the iframe that is giving me problems.

You shouldn't be creating your own iframe. The Google JS library takes care of this for you.