I have a WAB app that hasn't been deployed yet; it's just running locally. I'm writing a custom widget that needs to access data from an API. I'm getting an error of:
Access to fetch at '[API URL]' from origin 'https://[My Machine Name]:[Port]' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Any suggestions on how to fix this? Most of the information I've found on this refers to deployed apps. I saw one suggestion to use an open-source proxy (e.g. https://cors-anywhere.herokuapp.com/) but I don't think that will work, because the API is only accessible on my organization's network.
Solved! Go to Solution.
Is your widget using a esriRequest class to access the API data? If so then you need to configure it to use the proxy. Here is an example of how I do it:
var requestHandle = esriRequest({
url: 'https://myapiurl',
content: {
ppin: ppin,
f: 'json'
},
handleAs: "json",
timeout: 10000
},{useProxy: true, usePost: false, disableIdentityLookup: true});
Is your widget using a esriRequest class to access the API data? If so then you need to configure it to use the proxy. Here is an example of how I do it:
var requestHandle = esriRequest({
url: 'https://myapiurl',
content: {
ppin: ppin,
f: 'json'
},
handleAs: "json",
timeout: 10000
},{useProxy: true, usePost: false, disableIdentityLookup: true});
Thank you Robert for your quick and helpful response! I was using fetch, which doesn't seem to support proxy use, but I switched to using esriRequest and it worked!