CODEWITHSUNDEEP
angulargocorspreflight
Vikram
Vikram

Reputation: 3361

CORS issue with OPTIONS request

I am working on an application built with angular 5 and facing issues with CORS, in order to authorize users I am using jwt token method and send it in headers using jwt.interceptor as follows 

export class JwtInterceptor implements HttpInterceptor {
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // add authorization header with jwt token if available
        let currentUser = JSON.parse(localStorage.getItem('currentUser'));
        if (currentUser && currentUser.token) {
            request = request.clone({
                setHeaders: { 
                    Authorization: `Bearer ${currentUser.token}`,
                    Ip:currentUser.Ip
                }
            });
        }
        return next.handle(request);
    }
}

this code modifies the header and add token/bearer, because of this modification browsers sends preflight OPTIONS requests before actual API, I am using httpclient to send api requestes as follows

merchantDefaultSetup(ipAddress) {
      if(this.access_token != '')
      {
         this.coreService.setMerchantDefaultSetup(this.access_token, ipAddress).subscribe(res => {this.apiResponse = res},
                                                                         err => console.log(err),
                                                                         ()  => this.checkSetMerchantDefaultSetupApiResponse(this.apiResponse)
                                                                        );
      }
      else
      {
        this.router.navigate(["/dashboard"]);
      }
   }

and this functions uses following service 

public setMerchantDefaultSetup(token, ipAddress)
   {
      let header = new HttpHeaders({'Content-Type': 'application/json', 'Ip': ipAddress});
      return this.http.get<Response>(this.apiUrl+'merchant/default-setup/'+token, {headers: header}).map(response => response.response);
   }

above code works proper when api and app code are on same server but not I have created two ec2 instances on aws to host api and apps separately.

Following is the error I get on api hit 

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://mydomain.mytestsite.com:8080/api/v1/merchant/default-setup/678as6d98a6s8d68. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)

REST api are built with golang and running on 8080 port

All the articles gives solution for get,post, put methods but they are working fine in my case unless there is any preflight OPTIONS request

Please help

Upvotes: 0

Views: 3099

Answers (2)

autlunatic
autlunatic

Reputation: 790

have you considered using the https://github.com/rs/cors package?

with the cors package you can easily test your connection with the AllowAll() method. It handles the OPTIONS request for you. 

handler := cors.AllowAll().Handler(mux)
go func() {
    http.ListenAndServe(":5050", handler)
}()

cross origin requests are forbidden by default. you can allow additional origins for your application. However in production you should not use AllowAll(), but define your allowed origins.

Upvotes: 0

Alexander Leonov
Alexander Leonov

Reputation: 4794

You don't need to do anything in your angular app in order to make it work because CORS is a server-side configuration. Essentially it says who can call your API and using what methods/headers/other stuff. Having received proper headers in a response to an OPTIONS request browser then decides if you're allowed to make this call or not. Angular app has nothing to do with this. So, error you're receiving tells that you have not configured CORS properly on your web server. You can start, for example, from this article on how to enable it on a GO web server.

Upvotes: 1

Related Questions