Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
390 views
in Technique[技术] by (71.8m points)

Chrome will not set cookie from Angular POST request

My Angular 11 app is making a POST request to a Nest.js backend for authentication.

In my Nest app running at http://localhost:3000, I'm setting the CORS config as:

{
  origin: 'http://localhost:4200',
  methods: 'DELETE, GET, POST, PUT, OPTIONS',
  allowedHeaders: 'Origin, X-Requested-With, Content-Type, Accept, Authorization',
  credentials: true,
  optionsSuccessStatus: 200
}

In my Angular app running at http://localhost:4200, I have a custom interceptor to set withCredentials to true:

@Injectable()
export class CustomHttpInterceptor implements HttpInterceptor {

  intercept(httpRequest: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const clonedRequest = httpRequest.clone({
      withCredentials: true
    });

    return next.handle(clonedRequest);
  }

}

However, when my service method fires my authentication cookie is not set. My code to set the cookie in Nest is:

private setAuthCookie(response: ExpressResponse, accessToken: IAccessToken): void {
  const production = process.env.PRODUCTION === 'true';
  const cookieOptions = {
    httpOnly: false,
    secure: production,
  };

  if (production) {
    cookieOptions['sameSite'] = 'none';
  }

  response
    .status(200)
    .cookie(AUTH_COOKIE_NAME, accessToken.accessToken, cookieOptions);
}

The exact same code works as expected in a different application using exactly the same architecture, ports, etc. I have poured over the answers here on S.O. and other articles regarding sameSite and CORS, but so far nothing is helping.

The Set-Cookie header is in the response...

Set-Cookie: DZOutagesAuth=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFsc29pY29kZUBnbWFpbC5jb20iLCJzdWIiOiI1ZmYwYmIyYjc3YjQyMzFhNzJhYmZlZDciLCJpYXQiOjE2MTE3NTU0MzEsImV4cCI6MTYxMTc1OTAzMX0.rfdKoTxrJgG7_cco9PN_eqUQ7Q3FawiRV2swnqbvrKk; Path=/

...but it's never set. I have also tried adding an entry in my /etc/hosts to access the site locally on a domain other than localhost and writing the cookie specifically for that domain, but that doesn't work either.

Update

On my MacBook Pro running Big Sur, the cookie isn't set when using ANY browser, not just Chrome.

I have also checked my browser settings to allow all cookies.

I have disabled Do Not Track headers.

I have even tried all of the same code on a different computer running Windows 10 and cookies are not set in any browser.

Setting sameSite=None and secure, resulting in a header of:

Set-Cookie: DZOutagesAuth=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFsc29pY29kZUBnbWFpbC5jb20iLCJzdWIiOiI1ZmYwYmIyYjc3YjQyMzFhNzJhYmZlZDciLCJpYXQiOjE2MTE5NDY1NDUsImV4cCI6MTYxMTk1MDE0NX0.mN9ZobpMOe_xHIm2mSNSiabthjyTMBPvHTV3gooY2BQ; Path=/; HttpOnly; Secure; SameSite=None

doesn't work either. WTF.

question from:https://stackoverflow.com/questions/65920825/chrome-will-not-set-cookie-from-angular-post-request

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Step by step.

  1. You say that the Set-Cookie header is in the response, and by your configuration I assume Access-Control-Allow-Credentials is there aswell, so it doesn't seem like there should be a problem with the back-end.

  2. Chrome dev-tool seems to have some problem with cross domain cookies. Because you are using a POST instead of a GET the chrome dev tools won't show it. However if you navigate your nest.js back-end URL http://localhost:3000 open the dev-tools there and check application tab -> Storage -> Cookies -> http://localhost:3000 you should see your cookie. (If you don't see it there's really some big issue with your particular browser)

  3. Since you didn't mention, make sure you did register the angular interceptor in your app module like:

    providers: [ 
        { provide: HTTP_INTERCEPTORS, useClass: CustomHttpInterceptor, multi: true },
    ],
    
  4. Try again, and this time instead of chrome dev tools use firefox (chrome dev tools hides cross origin cookie headers from the requests and responses)


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...