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!