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.

Cross-origin request for local file

I need to open a local html file in the browser. The javascript works fine but ajax stops working and XMLHttpRequest gives a cross origin error. Is there a way to run ajax from local directory. It is necessary for me that it is run from local file only.
Thanks

For anyone who wants to know, I had to run a server in the app to serve the js files. Seems like it's not possible to do it without running a server.
If anyone knows of another way, do tell.

The simplest way to allow this in Firefox is to navigate to about:config, look for the privacy.file_unique_originsetting and toggle it off.
Essentially, Firefox used to treat local files from the same directory as being from the same source, thus CORS was happily satisfied. That behavior changed after CVE-2019-11730 was discovered.
It worked fine for me on 84.0.1 on Arch. Just be sure to turn it off when not locally debugging.
Source

If you are using VS Code, the Live Server extension might help you. It resolved a cross-origin issue I was having when editing a webpage.
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

If you are using chrome, try this extension
CORS allows web applications on one domain to make cross domain AJAX requests to another domain. It's dead simple to enable, only requiring a single response header to be sent by the server.
What this extension does is add to response header rule - Access-Control-Allow-Origin: *
You can do that manually also by sending a response header.
For simple CORS requests, the server only needs to add the following header to its response: Access-Control-Allow-Origin: *
Read this for more info.

If you are able to change the server code, you can try adding the string "null" to allowed origins. In Chrome, it sends the origin as "null" if it's running from a local file.
Here's an example in ASP.NET Core for setting up the "null" origin:
services.AddCors(options =>
{
options.AddPolicy("InsecurePolicy",
builder => builder
.WithOrigins("null")
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials());
});
Note that this is not recommended, but might be good enough if you just need it during development.

How to test GET/POST or better way?

I am writing an app that will send POST/GET requests from a remote client to a server. As a way to test and also educate myself I was trying to make these requests by writing a simple html file that resides on my desktop with a form that would POST to a server side php file. I also tried using ajax style requests or XMLHttprequests independent of and connected to a form but I received an error in the console:
Cross Origin Request Blocked
For all attempts form or no form. I have read that this is because I am making the request from FILE:// and this is not allowed by browsers unless CORS is enabled in some way. I have also read that using a webserver to host the file might fix the problem but I don't understand what is meant by webserver (separate or same domain? lamp, xammp, mamp?) and I am not interested in overriding security (allowing cors with headers) if I am eventually going to have to find a secure way when it goes live anyway.
As I said I am really just trying to test and I would like my html files to communicate with the server-side php from another machine instead of just putting all files together in the same domain/folder. Is there a way to do this using html/javascript or Websockets or anything html5 has to offer that might be useful?
code examples are welcome but if anyone could help me grasp this concept better it would be greatly appreciated. I am a noob XD
I am open to a better approach entirely if one exists, the only constraint I have is that everything on the UI/Client end is going to be written in html/javascript but I can utilize either or both intel XDK api and Cordova api as well.
Please help and thank you.

If you need to send some HTTP requests to test the server-side of your app I would strongly recommend you use an HTTP client like Fiddler:
http://www.telerik.com/fiddler
Also, read this:
GUI HTTP client
A desktop-based client will have a nice GUI with plenty of features to tweak, save, send, resend your requests.

One thing you can do is use pythons SimpleHTTPServer to serve the html file. Then when you go to your browser and go to 127.0.0.1:8000 the origin will be the same.
You can run the server by going into the directory that has the html file and running the command python -m SimpleHTTPServer 8000. This will serve the content of that directory on port 8000 and it should allow the requests to be made without a CORS exception.
Heres the documentation https://docs.python.org/2/library/simplehttpserver.html

I recommend that you disable the same-origin policy in your browser in order to test cross domain AJAX request from a local file.
For example, with Google Chrome on Windows you can disable this by launching chrome with the following command :
C:\Users\YOUR_USER\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files --disable-web-security
Together, both of these flags will allow you to test cross-domain ajax requests from a local file. These flags are relevant across Mac, Windows and Linux.

This is not on how to write the requests but you can bypass writing those if you are using the latest version of the Intel XDK. If you go to the services tab in the latest version of the Intel XDK, there is a service by the name of Sandbox Explorer. It has a GET and POST method UI. Just plug in the URL and you will see the response immediately. You can use this to debug the server that you are writing. Once you have the server returning the right response, create a data binding to use the GET API in your client side javascript or html code. Cross origin is taken care of.

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.

Is there a way to bypass Javascript / jQuery's same origin policy for local access?

Trying to use ajax, getJSON, and functions like that to fetch an external URL from a local (non-server) development computer. Is there a way to bypass the same origin policy, so that I can test locally, instead of having to upload to a server?

Here's the simple answer: chrome --disable-web-security
From the source code (chrome_switches.h):
// Don't enforce the same-origin policy. (Used by people testing their sites.)
const char kDisableWebSecurity[] = "disable-web-security";
I wanted to use jquery.js to send AJAX calls to a Google Apps python server running on port 8080. Just for testing, I wanted to run the browser and the server on the same machine.
I don't understand all the security nuances, but for temporary development it seems like a reasonable workaround. So long as I only use chrome for testing with this flag, it shouldn't be a problem.
Here's the whole command for Mac OS X:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security

We had the same need when developing our web app. Here's how we did it:
The browser and the server communicate only through JSON.
All the HTML is rendered in the browser using PURE (our JS template engine).
The browser code is developed locally like this:
We add a host parameter in the url of the app:
http://localhost/app.html?host=test.beebole-apps.com
In production, the JSON are sent to the server with a POST.
But here the function in charge of the ajax call will react to the host parameter and make a JSONP injection(GET) instead.
<script src="http://test.beebole-apps.com/?callback=f2309892&json={...}" />
f2309892 is a temporary function, with a random name, that points to the method that will handle the response
json is the JSON we send to the server
It means you will need some cooperation from the backend to serve you the json wrapped in a callback function like:
f2309892( /*the json here*/ );
Except a size limitation(you can't send a big JSON to the server with a GET) it works like a breeze.
An other advantage is you can call all the different systems(development and test) from the same localhost.

There are different ways to get around this, depending on which browser you're using for development. For example:
In Firefox (Gecko), set security.fileuri.strict_origin_policy to false
In Chrome, start the browser with the option --allow-file-access-from-files
References: Firefox, Chrome

Without touching the server -
The quickest and easiest way to bypass the same origin security policy in Firefox is the install the Force CORS add-on. This works with any service by inserting the proper headers into every response.
https://addons.mozilla.org/en-US/firefox/addon/forcecors/

Since this is a development issue and not a end-user/functionality issue, rather than focusing on getting AJAX to cross domains get your development environment set up as a proxy to fetch the most recent data from the production servers. This is actually really easy to do.
You'd need to set up a web server in your dev environment (if it doesn't have one already), and then configure the server to respond to 404 requests by fetching and then echoing production data. You can set up your server so that only the AJAX data files are picked up (otherwise, it will be confusing to debug other files if production assets start showing up on your development pages). So if http://dev.myserver.com/data/json/mydata.json is missing, your 404 script will get http://prod.myserver.com/data/json/mydata.json and echo it to the client. The nice thing about this set-up is that you can use mock data very easily: if the file is there in your dev environment, your AJAX script will get that; but if you then erase or rename that file, you'll get the production data instead. This feature has been so useful I can't recommend it enough.
If you're working with XML, I'd recommend duplicating the HTTP headers in the 404. If your 404 process responds with a Content-Type of text/html, you won't get any responseXML to parse.

try this (php curl ayax cross domain - by google):
http://www.iacons.net/writing/2007/08/02/ajax-cross-domain-proxy/
http://www.phpfour.com/blog/2008/03/cross-domain-ajax-using-php/
http://jquery-howto.blogspot.com/2009/04/cross-domain-ajax-querying-with-jquery.html

I had that problem, too, using Chrome and the --allow-file-access-from-files option didn't really help. Back to the script my server needed to return, I added these headers to the response and it worked fine :
'Access-Control-Allow-Origin: http://localhost/'
and another one for allowing a sort of key exchange
'Access-Control-Allow-Headers: X-KEY'

localhost is not allowed to use in CORS http://code.google.com/p/chromium/issues/detail?id=67743 use lvh.me instead