<div dir="ltr">Typically you need to alter your server API so that it handles CORS requests correctly.<div>For example with a Python/Flask REST API I defined:</div><div><pre style="color:rgb(0,0,0);font-family:"DejaVu Sans Mono";font-size:9pt">CORS(app, <span style="color:rgb(102,0,153)">resources</span>={<span style="color:rgb(0,128,128);font-weight:bold">r"/rest/*"</span>: <br> {<span style="color:rgb(0,128,128);font-weight:bold">"origins"</span>: app.config[<span style="color:rgb(0,128,128);font-weight:bold">'CORS_WHITELIST'</span>],<br> <span style="color:rgb(0,128,128);font-weight:bold">"supports_credentials"</span>: <span style="color:rgb(0,0,128);font-weight:bold">True<br></span><span style="color:rgb(0,0,128);font-weight:bold"> </span>},<br> <span style="color:rgb(0,128,128);font-weight:bold">r"/api/*"</span>:<br> {<span style="color:rgb(0,128,128);font-weight:bold">"origins"</span>: app.config[<span style="color:rgb(0,128,128);font-weight:bold">'CORS_WHITELIST'</span>],<br> <span style="color:rgb(0,128,128);font-weight:bold">"supports_credentials"</span>: <span style="color:rgb(0,0,128);font-weight:bold">True</span>}<br> });</pre><pre style="color:rgb(0,0,0);font-family:"DejaVu Sans Mono";font-size:9pt"><br></pre><pre style="color:rgb(0,0,0);font-family:"DejaVu Sans Mono";font-size:9pt">This allows requests with URIs of /rest or /api to be accepted from a different origin than the server.</pre><pre style="color:rgb(0,0,0);font-family:"DejaVu Sans Mono";font-size:9pt">I do remember reading that some of the Javascript functions have various levels of CORS support. There's a full discussion</pre><pre style="color:rgb(0,0,0);font-family:"DejaVu Sans Mono";font-size:9pt">of how to do it with XMLHttpRequest here <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" style="font-family:Arial,Helvetica,sans-serif;font-size:small">https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS</a></pre><pre style="color:rgb(0,0,0);font-family:"DejaVu Sans Mono";font-size:9pt">I've done it with the Fetch API like:</pre><pre style="color:rgb(0,0,0);font-family:"DejaVu Sans Mono";font-size:9pt"><pre style="font-family:"DejaVu Sans Mono";font-size:9pt"><span style="font-style:italic">fetch</span>(<span style="color:rgb(69,131,131)">url</span>, {<br> <span style="color:rgb(102,14,122);font-weight:bold">method</span>: <span style="color:rgb(0,128,0);font-weight:bold">'get'</span>,<br> <span style="color:rgb(102,14,122);font-weight:bold">mode</span>: <span style="color:rgb(0,128,0);font-weight:bold">'cors'</span>,<br> <span style="color:rgb(102,14,122);font-weight:bold">credentials</span>: <span style="color:rgb(0,128,0);font-weight:bold">'include'<br></span><span style="color:rgb(0,128,0);font-weight:bold"> </span>}).<span style="color:rgb(122,122,67)">then</span>(x => x.<span style="color:rgb(122,122,67)">json</span>())<br> .<span style="color:rgb(122,122,67)">then</span>(json => <span style="color:rgb(102,14,122);font-weight:bold;font-style:italic">console</span>.<span style="color:rgb(122,122,67)">log</span>(<span style="color:rgb(0,128,0);font-weight:bold">"JSON in response to GET is " </span>, json));<br>}</pre><pre style="font-family:"DejaVu Sans Mono";font-size:9pt"><br></pre><pre style="font-family:"DejaVu Sans Mono";font-size:9pt">I struggled for a while with this on Heroku. It is important that you verify that your server side API is going to allowllow your</pre><pre style="font-family:"DejaVu Sans Mono";font-size:9pt">requests coming from your Javascript origin.</pre></pre><pre style="color:rgb(0,0,0);font-family:"DejaVu Sans Mono";font-size:9pt"><br></pre><pre style="color:rgb(0,0,0);font-family:"DejaVu Sans Mono";font-size:9pt"><br></pre></div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Mon, Jun 8, 2020 at 11:58 AM Rich@tnr via Hidden-discuss <<a href="mailto:hidden-discuss@lists.hidden-tech.net">hidden-discuss@lists.hidden-tech.net</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex">
<div>
<p>I've seen this problem when trying to get images using
javascript, the answer tends to be add the option no-cors. <br>
I've done it using fetch - don't see that xhttp has the option,
like this:<code><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-size:13px;vertical-align:baseline;box-sizing:inherit"><br>
<br>
options </span><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-size:13px;vertical-align:baseline;box-sizing:inherit">=</span><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-size:13px;vertical-align:baseline;box-sizing:inherit"> </span><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-size:13px;vertical-align:baseline;box-sizing:inherit">{</span><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-size:13px;vertical-align:baseline;box-sizing:inherit"></span></code><code style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:Consolas,Menlo,Monaco,"Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",monospace,sans-serif;font-size:13px;vertical-align:baseline;box-sizing:inherit;background-color:transparent;white-space:inherit"><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-size:13px;vertical-align:baseline;box-sizing:inherit"><br>
method</span><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-size:13px;vertical-align:baseline;box-sizing:inherit">:</span><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-size:13px;vertical-align:baseline;box-sizing:inherit"> </span><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-size:13px;vertical-align:baseline;box-sizing:inherit">'GET'</span><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-size:13px;vertical-align:baseline;box-sizing:inherit">,</span><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-size:13px;vertical-align:baseline;box-sizing:inherit"></span></code><code style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:Consolas,Menlo,Monaco,"Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",monospace,sans-serif;font-size:13px;vertical-align:baseline;box-sizing:inherit;background-color:transparent;white-space:inherit"><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-size:13px;vertical-align:baseline;box-sizing:inherit"> mode</span><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-size:13px;vertical-align:baseline;box-sizing:inherit">:</span><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-size:13px;vertical-align:baseline;box-sizing:inherit"> </span><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-size:13px;vertical-align:baseline;box-sizing:inherit">'no-cors'</span><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-size:13px;vertical-align:baseline;box-sizing:inherit"></span></code><code style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:Consolas,Menlo,Monaco,"Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",monospace,sans-serif;font-size:13px;vertical-align:baseline;box-sizing:inherit;background-color:transparent;white-space:inherit"><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-size:13px;vertical-align:baseline;box-sizing:inherit"> };</span><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-size:13px;vertical-align:baseline;box-sizing:inherit"></span></code><code style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:Consolas,Menlo,Monaco,"Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",monospace,sans-serif;font-size:13px;vertical-align:baseline;box-sizing:inherit;background-color:transparent;white-space:inherit"><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-size:13px;vertical-align:baseline;box-sizing:inherit"><br>
<br>
fetch</span><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-size:13px;vertical-align:baseline;box-sizing:inherit">(</span><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-size:13px;vertical-align:baseline;box-sizing:inherit">url</span><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-size:13px;vertical-align:baseline;box-sizing:inherit">,</span><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-size:13px;vertical-align:baseline;box-sizing:inherit">
options</span><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-size:13px;vertical-align:baseline;box-sizing:inherit">).</span><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-size:13px;vertical-align:baseline;box-sizing:inherit">then</span><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-size:13px;vertical-align:baseline;box-sizing:inherit">(</span><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-size:13px;vertical-align:baseline;box-sizing:inherit">response
</span><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-size:13px;vertical-align:baseline;box-sizing:inherit">=></span><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-size:13px;vertical-align:baseline;box-sizing:inherit"> response</span><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-size:13px;vertical-align:baseline;box-sizing:inherit">.</span><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-size:13px;vertical-align:baseline;box-sizing:inherit">blob</span><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-size:13px;vertical-align:baseline;box-sizing:inherit">())</span></code><br>
<code style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:Consolas,Menlo,Monaco,"Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",monospace,sans-serif;font-size:13px;vertical-align:baseline;box-sizing:inherit;background-color:transparent;white-space:inherit"><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-size:13px;vertical-align:baseline;box-sizing:inherit"></span></code></p>
<pre style="margin:0px 0px 1em;padding:12px 8px;border:0px;font-style:normal;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:inherit;font-variant-east-asian:inherit;font-weight:400;font-stretch:inherit;line-height:inherit;font-family:Consolas,Menlo,Monaco,"Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",monospace,sans-serif;font-size:13px;vertical-align:baseline;box-sizing:inherit;width:auto;max-height:600px;overflow:auto;border-radius:3px;display:block;color:rgb(36,39,41);letter-spacing:normal;text-align:left;text-indent:0px;text-transform:none;word-spacing:0px;text-decoration-style:initial;text-decoration-color:initial"><code style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:Consolas,Menlo,Monaco,"Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",monospace,sans-serif;font-size:13px;vertical-align:baseline;box-sizing:inherit;background-color:transparent;white-space:inherit"><span style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-size:13px;vertical-align:baseline;box-sizing:inherit"> ......
</span></code></pre>
<p>However since you are saying it's a server you control at AWS
then more specific detail is needed to be more help.<br>
Esp since there are many AWS services, which one is important.<br>
<br>
Here is a more detailed explanation of cors itself, which I'll
guess you've already seen:<br>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS</a><br>
<br>
Rich<br>
</p>
<div>On 6/8/2020 10:34 AM, Alan Frank via
Hidden-discuss wrote:<br>
</div>
<blockquote type="cite">Hi,
<br>
<br>
I am a newbie with AWS (learning it via <a href="http://acloudguru.com" target="_blank">acloudguru.com</a>, where I
posted my question a few days ago and have gotten no responses)
and am running into problems with CORS; specifically, I am getting
an error when my JS code attempts to call my API: "Access to
XMLHttpRequest at
'https://<redacted>.<a href="http://execute-api.us-east-1.amazonaws.com/default" target="_blank">execute-api.us-east-1.amazonaws.com/default</a>'
from origin '<a href="https://s3.amazonaws.com" target="_blank">https://s3.amazonaws.com</a>' has been blocked by CORS
policy: No 'Access-Control-Allow-Origin' header is present on the
requested resource."
<br>
<br>
There is a huge amount of information out there, but most of it
appears to be either irrelevant or over my head. I did figure out
that I might be able to look at an access log to see what is going
on. I found the instructions on setting this up
(<a href="https://docs.aws.amazon.com/apigateway/latest/developerguide/set-up-logging.html#set-up-access-logging-using-console" target="_blank">https://docs.aws.amazon.com/apigateway/latest/developerguide/set-up-logging.html#set-up-access-logging-using-console</a>),
but they tell me to "Sign in to the API Gateway console, select an
API, choose Settings from the primary navigation panel, and enter
an ARN in CloudWatch log role ARN." However, this field does not
seem to exist. I have provided this feedback to AWS, but am not
expecting a timely response.
<br>
<br>
I'd be grateful for any help.
<br>
<br>
--Alan
<br>
_______________________________________________
<br>
Hidden-discuss mailing list - home page:
<a href="http://www.hidden-tech.net" target="_blank">http://www.hidden-tech.net</a>
<br>
<a href="mailto:Hidden-discuss@lists.hidden-tech.net" target="_blank">Hidden-discuss@lists.hidden-tech.net</a>
<br>
<br>
You are receiving this because you are on the Hidden-Tech
Discussion list.
<br>
If you would like to change your list preferences, Go to the
Members
<br>
page on the Hidden Tech Web site.
<br>
<a href="http://www.hidden-tech.net/members" target="_blank">http://www.hidden-tech.net/members</a>
<br>
<br>
</blockquote>
<pre cols="72">--
Rich Roth
CEO TnR Global
Bio and personal blog: <a href="http://rizbang.com" target="_blank">http://rizbang.com</a>
Building the really big sites: <a href="http://www.tnrglobal.com" target="_blank">http://www.tnrglobal.com</a>
Small/Soho business in the PV: <a href="http://www.hidden-tech.net" target="_blank">http://www.hidden-tech.net</a>
Places to meet for business: <a href="http://www.meetmewhere.com" target="_blank">http://www.meetmewhere.com</a>
And for relaxation: <a href="http://www.welovemuseums.com" target="_blank">http://www.welovemuseums.com</a>
<a href="http://www.artonmytv.com/" target="_blank">http://www.artonmytv.com/</a>
Helping move the world: <a href="http://www.earththrives.com" target="_blank">http://www.earththrives.com</a></pre>
</div>
_______________________________________________<br>
Hidden-discuss mailing list - home page: <a href="http://www.hidden-tech.net" rel="noreferrer" target="_blank">http://www.hidden-tech.net</a><br>
<a href="mailto:Hidden-discuss@lists.hidden-tech.net" target="_blank">Hidden-discuss@lists.hidden-tech.net</a><br>
<br>
You are receiving this because you are on the Hidden-Tech Discussion list.<br>
If you would like to change your list preferences, Go to the Members<br>
page on the Hidden Tech Web site.<br>
<a href="http://www.hidden-tech.net/members" rel="noreferrer" target="_blank">http://www.hidden-tech.net/members</a><br>
</blockquote></div><br clear="all"><div><br></div>-- <br><div dir="ltr" class="gmail_signature"><div dir="ltr"><div>David Marshall<br><a href="http://davidmarshall.us" target="_blank">http://davidmarshall.us</a></div><div><br></div></div></div>