How to fix local dev CORS issues

I was getting CORS issues when trying to request my API:

Access to fetch at 'https://myapiurl.com/myapipath' from origin 'http://192.168.99.107:19006' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

On iOS/Android you don’t have to worry about CORS issues but on web you do. Here’s how I was able to fix it for my local dev environment, so that I could query my API:

Create a webpack.config.js file. You can do this by running expo customize:web.

Change the config to the following

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function(env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);

  if (config.mode === 'development') {
    config.devServer.proxy = {
      '/**': {
        target: {
          host: 'example.com',
          protocol: 'https:',
          port: 443,
        },
        secure: false,
        changeOrigin: true,
        logLevel: 'info',
      },
    };
  }

  return config;
};

This won’t fix all CORS issues - there’ll still be issues with querying other people’s APIs - but at least you can now query your own APIs!

1 Like

the same question