AndrewJ.07800 (Customer) asked a question.
I'm attempting to build a serverless blazor WASM app that authenticates to Okta, retrieves an AWS access token, then interacts with some S3 resources using that authentication. The login itself works perfectly but when I attempt to access the AWS embed link I get a 302 response and the following error message:
"Access to fetch at 'https://<my-domain>.okta.com/home/amazon_aws/<my-aws-embed-link>?sessionToken=<my-session-token>' from origin 'https://localhost:5001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."
I've confirmed that localhost:5001 is added as a trusted origin in the Okta dashboard. Is there some additional configuration that needs to take place or is this not possible?
Hi Andrew,
Rares here from Okta Support, thank you for reaching out to us.
"Access to fetch at 'https://<my-domain>.okta.com/home/amazon_aws/<my-aws-embed-link>?sessionToken=<my-session-token>' from origin 'https://localhost:5001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."
The message says that the browser has blocked the request because of a CORS policy.
It suggests two solutions. The second suggestion is to change the mode from cors to no-cors in the JavaScript fetch request. This is not an option as the browser always deletes the response data when in no-cors mode to prevent data from being read by an unauthorized client.
For more information about the issue in cause, please follow the steps from the following link:
How to solve a simple CORS issue.
My sincere appreciation.
Rares Farau
Technical Support Engineer
Okta Global Customer Care
The solution to the issue is for the server to set a response header that allows the browser to make cross-domain requests to it.
Access-Control-Allow-Origin: http://localhost:8080
This tells the web browser that the cross-origin requests are to be allowed for the specified domain. If the domain specified in the response header matches the domain of the web page, specified in the Origin request header, then the browser will not block the response being received by JavaScript.
We are going to set the header when the URL contains v2. Change the GetMessages() function in cors/server.go to the following:
func GetMessages(c *gin.Context) {
version := c.Param("version")
fmt.Println("Version", version)
if version == "v2" {
c.Header("Access-Control-Allow-Origin", "http://localhost:8080")
}
c.JSON(http.StatusOK, gin.H{"messages": messages})
}
This sets a header to allow cross-origin requests for the v2 URI.
Restart the server and go to the web page. If you click on Get v1 you will get blocked by CORS. If you click on Get v2, the request will be allowed.
A response can only have at most one Access-Control-Allow-Origin header. The header can only specify only one domain. If the server needs to allow requests from multiple origin domains, it needs to generate an Access-Control-Allow-Origin response header with the same value as the Origin request header.
I would suggest opening a ticket with us thus we can take a closer look at the problem.
Have a nice rest of the day ahead.