Send custom header in preflight request OPTIONS angular 5

Question

I have built an app with angular 5 which connects to a REST API developed with golang and hosted on an aws ec2 instance running on port 8080. My angular frontend code creates a POST request, and before making that request, the browser first sends a COR preflight request, which fails with the following error message:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://signup.mysite.com:8080/api/v1/merchant/signup. (Reason: missing token ‘access-control-allow-credentials’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel).

The following headers are sent by the browser in the OPTIONS request to the REST API server:

Access-Control-Request-Headers : access-control-allow-credentia…rol-allow-origin,content-type
Access-Control-Request-Method : POST

Cors are enabled on golang but not sure if they are working. How can I resolve the issue

EDIT Using following code to add header in post request in angular 5

import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';



let headers = new HttpHeaders();
  headers = headers.append('Access-Control-Allow-Origin', '*');
  headers = headers.append('Access-Control-Allow-Credentials', 'true');

  return this.http.post<Response>(this.apiUrl+'merchant/signup', JSON.stringify(formValues),{headers: headers}).map(response => response.response);'true');

Following code is in go file

func CORSMiddleware() gin.HandlerFunc {
    return func(c *gin.Context) {
        // host := strings.Split(c.Request.Host, ":8080")
        c.Writer.Header().Set("Content-Type", "application/json")
        // c.Writer.Header().Set("Access-Control-Allow-Origin", "http://"+host[0])
        c.Writer.Header().Set("Access-Control-Allow-Origin", "*")
        c.Writer.Header().Set("Access-Control-Allow-Credentials", "true")
        c.Writer.Header().Set("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE")
        // c.Writer.Header().Set("Access-Control-Allow-Headers", "Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization, Ip, X-Requested-With, access-control-allow-credentials ")
        c.Writer.Header().Set("Access-Control-Allow-Headers", "Accept, Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization")
    }
}

also using cores package

router.Use(cors.Default())

You need to show the part of your frontend code that’s setting the request headers. That `access-control-allow-credentia…rol-allow-origin` part seems to indicate you’re trying to set the Access-Control-Allow-Credentials and Access-Control-Allow-Origin header in your frontend code. You don’t want to be doing that. And if `access-control-allow-credentia…rol-allow-origin,content-type` is the literal value of the Access-Control-Request-Headers request header (and not some copy/paste error or whatever), then it seems like the header-setting part of frontend code has some syntax error anyway — sideshowbarker, Jun 08 '18 at 10:59
See other questions on stackoverflow. For example https://stackoverflow.com/questions/39507065/enable-cors-in-golang — TehSphinX, Jun 08 '18 at 11:06
Remove the `let headers = new HttpHeaders(); headers = headers.append('Access-Control-Allow-Origin', '*'); headers = headers.append('Access-Control-Allow-Credentials', 'true');` part from your frontend JavaScript code — sideshowbarker, Jun 08 '18 at 14:26
I did it but its not working, gives unreachable server error — Vikram, Jun 08 '18 at 14:47

score 1 · Answer 1 · answered Jun 08 '18 at 10:34

you have to enable the cors from the server side code.

func setupResponse(w *http.ResponseWriter, req *http.Request) {
    (*w).Header().Set("Access-Control-Allow-Origin", "*")
    (*w).Header().Set("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE")
    (*w).Header().Set("Access-Control-Allow-Headers", "Accept, Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization")
}

func yourApi(w http.ResponseWriter, req *http.Request) {
    setupResponse(&w, req) 

    // process the request...
}

This code must be in the answer to the preflight request. That is very important or it will never be reached. — TehSphinX, Jun 08 '18 at 10:57

score -2 · Answer 2 · edited Sep 18 '18 at 06:09

You can disable CORS during development on your local copy of Chrome. If you are on a MAC OS, you give this command in the terminal:

open -a Google\ Chrome --args --disable-web-security --user-data-dir

This step disables a number (if not all) of the Chrome security features so proceed with caution. This will eliminate your error if you don't have control over the server side and allow you to proceed with your development.

Send custom header in preflight request OPTIONS angular 5

2 Answers2