DO NOT MERGE: setting the Content-Type to '' does trigger a preflight request

feat: Set outgoing request Content-Type to ''

Sentry's Relay server expects envelopes to have
  Content-Type: application/x-sentry-envelope
however, that header would cause CORS preflight requests that we want to
avoid.

If we don't set the Content-Type header, browsers fill it in with
text/plain. We prefer sending an empty string than setting an incorrect
Content-Type.

Relay accepts the empty string and treats the body as an envelope.

Author: rhcarvalho

packages/browser/src/transports/fetch.ts

@@ -23,7 +23,7 @@ export class FetchTransport extends BaseTransport {
       });
     }
 
-    const sentryReq = eventToSentryRequest(event, this._api);
+    const sentryReq = eventToSentryRequest(event, this._api, this.options.headers);
 
     const options: RequestInit = {
       body: sentryReq.body,
@@ -33,12 +33,9 @@ export class FetchTransport extends BaseTransport {
       // It doesn't. And it throw exception instead of ignoring this parameter...
       // REF: https://github.com/getsentry/raven-js/issues/1233
       referrerPolicy: (supportsReferrerPolicy() ? 'origin' : '') as ReferrerPolicy,
+      headers: sentryReq.headers,
     };
 
-    if (this.options.headers !== undefined) {
-      options.headers = this.options.headers;
-    }
-
     return this._buffer.add(
       new SyncPromise<Response>((resolve, reject) => {
         global

packages/browser/src/transports/xhr.ts

@@ -21,7 +21,7 @@ export class XHRTransport extends BaseTransport {
       });
     }
 
-    const sentryReq = eventToSentryRequest(event, this._api);
+    const sentryReq = eventToSentryRequest(event, this._api, this.options.headers);
 
     return this._buffer.add(
       new SyncPromise<Response>((resolve, reject) => {
@@ -49,9 +49,9 @@ export class XHRTransport extends BaseTransport {
         };
 
         request.open('POST', sentryReq.url);
-        for (const header in this.options.headers) {
-          if (this.options.headers.hasOwnProperty(header)) {
-            request.setRequestHeader(header, this.options.headers[header]);
+        for (const header in sentryReq.headers) {
+          if (sentryReq.headers.hasOwnProperty(header)) {
+            request.setRequestHeader(header, sentryReq.headers[header]);
           }
         }
         request.send(sentryReq.body);

packages/core/src/request.ts

@@ -4,21 +4,38 @@ import { API } from './api';
 
 /** A generic client request. */
 interface SentryRequest {
-  body: string;
   url: string;
-  // headers would contain auth & content-type headers for @sentry/node, but
-  // since @sentry/browser avoids custom headers to prevent CORS preflight
-  // requests, we can use the same approach for @sentry/browser and @sentry/node
-  // for simplicity -- no headers involved.
-  // headers: { [key: string]: string };
+  headers: { [key: string]: string };
+  body: string;
 }
 
 /** Creates a SentryRequest from an event. */
-export function eventToSentryRequest(event: Event, api: API): SentryRequest {
+export function eventToSentryRequest(event: Event, api: API, extraHeaders?: { [key: string]: string }): SentryRequest {
   const useEnvelope = event.type === 'transaction';
 
   const req: SentryRequest = {
     body: JSON.stringify(event),
+    headers: {
+      // To simplify maintenance, eventToSentryRequest is used by both
+      // @sentry/browser and @sentry/node.
+      //
+      // In @sentry/browser we want to avoid CORS preflight requests and thus we
+      // want to ensure outgoing requests are "simple requests" as explained in
+      // https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Simple_requests.
+      //
+      // Therefore, we do not include any custom headers (auth goes in the query
+      // string instead) and we are limited in the values of Content-Type. If we
+      // were to not set the Content-Type header, browsers fill it in as
+      // `text/plain`, which is rejected by Relay for envelopes. If we set it to
+      // the empty string, current versions of mainstream browsers seem to
+      // respect it and despite empty string not being in the list of accepted
+      // values for "simple requests", empirically browsers do not send
+      // preflight requests in that case.
+      //
+      // 'Content-Type': useEnvelope ? 'application/x-sentry-envelope' : 'application/json',
+      'Content-Type': '',
+      ...extraHeaders,
+    },
     url: useEnvelope ? api.getEnvelopeEndpointWithUrlEncodedAuth() : api.getStoreEndpointWithUrlEncodedAuth(),
   };
 

packages/node/src/transports/base.ts

@@ -57,13 +57,10 @@ export abstract class BaseTransport implements Transport {
   }
 
   /** Returns a build request option object used by request */
-  protected _getRequestOptions(uri: url.URL): http.RequestOptions | https.RequestOptions {
-    const headers = {
-      // The auth headers are not included because auth is done via query string to match @sentry/browser.
-      //
-      // ...this._api.getRequestHeaders(SDK_NAME, SDK_VERSION)
-      ...this.options.headers,
-    };
+  protected _getRequestOptions(
+    uri: url.URL,
+    headers: { [key: string]: string },
+  ): http.RequestOptions | https.RequestOptions {
     const { hostname, port, protocol } = uri;
     // See https://github.com/nodejs/node/blob/38146e717fed2fabe3aacb6540d839475e0ce1c6/lib/internal/url.js#L1268-L1290
     const path = `${uri.pathname || ''}${uri.search || ''}`;
@@ -93,8 +90,8 @@ export abstract class BaseTransport implements Transport {
     }
     return this._buffer.add(
       new Promise<Response>((resolve, reject) => {
-        const sentryReq = eventToSentryRequest(event, this._api);
-        const options = this._getRequestOptions(new url.URL(sentryReq.url));
+        const sentryReq = eventToSentryRequest(event, this._api, this.options.headers);
+        const options = this._getRequestOptions(new url.URL(sentryReq.url), sentryReq.headers);
 
         const req = httpModule.request(options, (res: http.IncomingMessage) => {
           const statusCode = res.statusCode || 500;