The Issue with Tracing and CORS

Oct 13, 2025 by leolavanderia.com.br 104 views

From Discord: Seeking Feedback on CORS Behavior of FetchHttpClient in Effect Typescript Library

In the world of web development, working with APIs and making HTTP requests is a crucial aspect of building robust and scalable applications. However, when using libraries like Effect Typescript, developers may encounter issues that can hinder their progress. Recently, a discussion on Discord highlighted a concern about CORS behavior when using FetchHttpClient in the Effect Typescript library. In this article, we will delve into the details of this issue, explore the possible causes, and discuss the proposed solutions.

The discussion began with corcoder raising an issue about CORS behavior when using FetchHttpClient in the Effect Typescript library. They suspected that this might be a bug, but sbrg suggested that the problem might be related to tracing. sbrg identified that preflight requests include headers like b3, traceparent, which could trigger CORS restrictions. To work around this issue, sbrg provided a code snippet that disables tracing:

import { withTracerDisabledWhen } from "@effect/platform/HttpClient"

// ...

program.pipe(
  Effect.provide(FetchHttpClient.layer),
  Effect.scoped,
  Effect.provide(DevToolsLive),
  withTracerDisabledWhen(() => true),
  NodeRuntime.runMain
)

corcoder confirmed that this solution resolved their issue and expressed gratitude to sbrg. They also suggested that this information should be added to the documentation to help others who might face similar issues, especially newcomers to the Effect library.

CORS Issue with FetchHttpClient: The tracing mechanism can cause additional headers to be sent in HTTP requests, potentially causing CORS issues.
Tracing Workaround: Disabling tracing for HTTP requests is a viable workaround to prevent preflight requests from adding headers that trigger CORS restrictions.
Documentation Suggestion: There is a need to address this issue in the documentation to aid users, particularly newcomers.
Community Tools: The community has tools like the /issueify command to help streamline the process of creating GitHub issues from Discord discussions.

Before we dive deeper into the issue, let's briefly discuss CORS and tracing.

CORS (Cross-Origin Resource Sharing)

CORS is a security feature implemented in web browsers to prevent web pages from making requests to a different origin (domain, protocol, or port) than the one the web page was loaded from. This is done to prevent malicious scripts from making unauthorized requests on behalf of the user.

Tracing

Tracing is a mechanism used to track the flow of requests and responses between services. It involves adding headers to HTTP requests to enable tracing. In the context of the Effect Typescript library, tracing is used to provide additional information about the requests and responses.

The Issue with Tracing and CORS

When tracing is enabled, additional headers like b3, traceparent are added to HTTP requests. These headers can trigger CORS restrictions, causing issues with the FetchHttpClient in the Effect Typescript library.

To work around this issue, sbrg provided a code snippet that disables tracing:

import { withTracerDisabledWhen } from "@effect/platform/HttpClient"

// ...

program.pipe(
  Effect.provide(FetchHttpClient.layer),
  Effect.scoped,
  Effect.provide(DevToolsLive),
  withTracerDisabledWhen(() => true),
  NodeRuntime.runMain
)

This solution disables tracing for HTTP requests, preventing preflight requests from adding headers that trigger CORS restrictions.

corcoder suggested that this information should be added to the documentation to help others who might face similar issues, especially newcomers to the Effect library. sbrg agreed that an issue should be submitted and mentioned a bot—they referred to it as /issueify—that could potentially automate issue creation on the GitHub repository for Effect.

In conclusion, the discussion on Discord highlighted a concern about CORS behavior when using FetchHttpClient in the Effect Typescript library. The proposed solution involves disabling tracing for HTTP requests to prevent preflight requests from adding headers that trigger CORS restrictions. It is essential to address this issue in the documentation to aid users, particularly newcomers. The community has tools like the /issueify command to help streamline the process of creating GitHub issues from Discord discussions.

Update Documentation: Add information about the CORS issue and the proposed solution to the documentation to help users.
Submit Issue: Submit an issue on the GitHub repository for Effect to track this concern.
Use Community Tools: Utilize community tools like the /issueify command to help streamline the process of creating GitHub issues from Discord discussions.

By following these recommendations, we can ensure that users are aware of the CORS issue and can take necessary steps to resolve it.
From Discord: Seeking Feedback on CORS Behavior of FetchHttpClient in Effect Typescript Library - Q&A

In our previous article, we discussed the CORS behavior issue when using FetchHttpClient in the Effect Typescript library. We explored the possible causes, proposed solutions, and the importance of addressing this issue in the documentation. In this article, we will provide a Q&A section to help users better understand the issue and its implications.

Q: What is CORS and why is it important?

A: CORS (Cross-Origin Resource Sharing) is a security feature implemented in web browsers to prevent web pages from making requests to a different origin (domain, protocol, or port) than the one the web page was loaded from. This is done to prevent malicious scripts from making unauthorized requests on behalf of the user.

Q: What is tracing and how does it relate to CORS?

A: Tracing is a mechanism used to track the flow of requests and responses between services. It involves adding headers to HTTP requests to enable tracing. In the context of the Effect Typescript library, tracing is used to provide additional information about the requests and responses. When tracing is enabled, additional headers like b3, traceparent are added to HTTP requests, which can trigger CORS restrictions.

Q: What is the issue with tracing and CORS in the Effect Typescript library?

A: When tracing is enabled, the additional headers added to HTTP requests can trigger CORS restrictions, causing issues with the FetchHttpClient in the Effect Typescript library. This can lead to errors and unexpected behavior in applications that rely on this library.

Q: How can I resolve the CORS issue in the Effect Typescript library?

A: To resolve the CORS issue, you can disable tracing for HTTP requests using the withTracerDisabledWhen function. This will prevent preflight requests from adding headers that trigger CORS restrictions.

Q: How do I update the documentation to reflect the CORS issue and its resolution?

A: To update the documentation, you can add information about the CORS issue and the proposed solution to the documentation. This will help users who may face similar issues in the future.

Q: What community tools are available to help with creating GitHub issues from Discord discussions?

A: The community has tools like the /issueify command that can help streamline the process of creating GitHub issues from Discord discussions.

Q: Why is it essential to address the CORS issue in the documentation?

A: It is essential to address the CORS issue in the documentation to help users who may face similar issues in the future. This will ensure that users are aware of the issue and can take necessary steps to resolve it.

In conclusion, the CORS behavior issue when using FetchHttpClient in the Effect Typescript library is a critical concern that requires attention. By understanding the issue, its causes, and the proposed solutions, users can take necessary steps to resolve it. We hope this Q&A article has provided valuable insights and helped users better understand the issue.

Update Documentation: Add information about the CORS issue and the proposed solution to the documentation to help users.
Submit Issue: Submit an issue on the GitHub repository for Effect to track this concern.
Use Community Tools: Utilize community tools like the /issueify command to help streamline the process of creating GitHub issues from Discord discussions.

By following these recommendations, we can ensure that users are aware of the CORS issue and can take necessary steps to resolve it.