Proxy Setup in React Applications — Avoiding CORS for Localhost URLs

When developing a web application, it’s common to encounter scenarios where you need to make requests to an external API or server during development. However, due to security restrictions or other limitations, these requests may be blocked or cause CORS (Cross-Origin Resource Sharing) issues.

This article provides a solution for handling CORS when making requests to [http://localhost](http://localhost)URLs in React applications by setting up a proxy. Please note that this guide focuses on React applications that are created without using Create React App (CRA). For CRA applications, refer to this link for proxy configuration: https://create-react-app.dev/docs/proxying-api-requests-in-development/.

Configuring proxy:

Webpack dev server provides a built-in proxy feature that allows you to redirect requests from your development server to another server. This enables you to bypass CORS restrictions and easily test your application without worrying about cross-origin issues.

Here’s how you can set it up:

1. Open your webpack configuration file, typically named webpack.config.js.
2. Locate the devServer property within the configuration object. If it's not present, you can add it at the top level.
3. Inside devServer, create a proxy property as an object to specify the proxy settings.

devServer: {
  proxy: {
    '/api': 'http://localhost:3000',
  },
}

In this example, we’re configuring a proxy for requests starting with /api to be redirected to http://localhost:3000. Make sure to adjust the proxy URL based on your specific API or server.

Now, during development, when your application makes a request to /api/some-endpoint, webpack dev server automatically forwards the request to http://localhost:3000/api/some-endpoint. This seamless redirection allows you to interact with the external API without encountering CORS issues.

If you need to point to multiple localhost endpoints, simply add additional properties to the proxy settings:

devServer: {
  proxy: {
    '/api': 'http://localhost:3000',
    '/api2': 'http://localhost:4000',
  },
}

With this setup, when your application requests /api2/some-endpoint, webpack dev server will automatically forward the request to [http://localhost:4000/api2/some-endpoint](http://localhost:4000/api/some-endpoint.) .

It’s important to note that the proxy configuration only affects requests made by the client-side code during development. When you build and deploy your application for production, you’ll need to handle the server-side proxying differently.

Understanding the changeOrigin Property:

By default, when a request is proxied, the origin header sent by the browser still contains the original domain from which the request originated. This behavior can cause issues when the target server expects requests to come from the proxy server's domain.

Setting changeOrigin to true ensures that the origin header is modified to match the target URL. This helps in cases where the target server performs checks or validation based on the origin header, allowing the request to pass through successfully.

devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:3000',
      changeOrigin: true
    },
  },
}

By including changeOrigin: true, the origin of the request will be modified to match the target URL (http://localhost:3000 in this case), ensuring smoother communication with the proxied server.

It’s important to note that not all scenarios require setting changeOrigin to true. If you don't encounter any issues related to the origin header or the target server's requirements, you may not need to include this property. However, if you're experiencing CORS issues or facing problems with the origin header, setting changeOrigin to true can be beneficial.

Conclusion:

By setting up a proxy with webpack dev server, you can streamline the development process for applications relying on external APIs. It provides a practical solution to avoid common cross-origin issues and ensures a smooth development experience.