Access controll allow origin error in Okta

Thanks for a platform. It’s very greatfull to have okta on my app.

I am developing rest services and consuming those by ajax.

Now I have secured my web service with okta and it is working well when I invoke from chrome or any browser. But If I tried to consume from Jquery/ajax, I am getting below error. Could anyone from your team can help on this.

I have used python, flask to develop web services and used OpenIdConnect (flask_oidc) for authentication.
Piece of code

                  @app.before_request
                    def before_request():
print("Before request",oidc.user_loggedin)
if oidc.user_loggedin:
    #print("access token",oidc.get_access_token())
    print("sub",oidc.user_getinfo(["name"]))
    g.user = oidc.user_getfield("name")
else:
    g.user = None	


     @app.route('/ai/docsearchStatus', methods = ['GET'])
    @cross_origin(origin='*')
     @oidc.require_login
    def getHealthstatus():
         response = {}
         response['user'] = g.user
         response=json.dumps(response); 
     return response  

Jquery/Ajax is using to invoke the web service.

		$.ajax({     
			type:"GET",     
			url: https://mywebsite.com/ai/docsearchStatus, 
			
			beforeSend: function(xhr) {
				xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
				xhr.setRequestHeader("Accept", "application/json");
				xhr.setRequestHeader("Content-Type", "application/json");
	        },
			success:function(data, textStatus, XMLHttpRequest){
				
							
			},     
			error:function(XMLHttpRequest, textStatus, errorThrown){ 
				//fnHideLoader();
				}				
		});

Error is :

Failed to load https://mycompany.okta.com/oauth2/ausl2cu6foKJx4WXS0x7/v1/authorize? Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin 'https://mywebsite.com’is therefore not allowed access.

Can any one help o this.

Hey @BalajiRaju!

Is your Flask application configured for CORS? Once you get past the CORS issue, I’m guessing you will need to add the access token to your request too (if you haven’t already), something like:

xhr.setRequestHeader('Authorization', 'Bearer ' + token);

Hi @bdemers Thanks for your kind reply, Yes my flask is configured with cors.

      cors = CORS(app, resources={r"/ai/*": {"origins": "*"}})

I am not calling any okta service by ajax. I am calling my rest service which is protected by okta. So I didn’t get token.

@bdemers Do you have any suggestion for me.

Sorry, sounds like I was making some assumptions.

How is your frontend authenticating with your backend?

Hi @bdemers

I have tried two ways:
One is authenticating webservices using flask oidc and consuming those from jquery/ajax. It didn’t work due to cors issue(Explained above).
Second one id using Single page application (Client side authentication). It is not suiting (unable to capture the token in redirecting URL)for my project because it developed only jquery,Ajax,Html and consuming backend python webservices.

My Project techstack:
Jquery,Ajax, Python, flask web services, Apache.

Note: I am not using flask for web model. used only developing rest services.

Please let me know If you still need more information.

Cool! That helps!

So back to the https:///okta.com/oauth2/ausl2cu6foKJx4WXS0x7/v1/authorize error, what library is making that request in order to get a token?

I am using flask_oidc,

flask_odc is internally using httplib2 python library and It is using flask redirect to call authorize url.

flask is finally integrated in apache windows

Any clues, I tried by adding Access-control-origin * in all areas(flask,Apache conf) but no luck.
Is there a way to do sso with out redirection?