Undocumented TypeError: Failed to fetch

[Fasaiel]

Hi 

I'm getting the issue as attached screenshot when I'm trying to hit "Try it out" from spec in the developer portal. 

I searched about the issue and all I got is that the issue is related to CORS even though the CORS is enabled already in the APIGEE proxy and the URL is https in both of swagger and APIGEE proxy. 

I have to go to console , hit the URL appear then click on "advanced" in the browser > then click on "process" link  to accept the certification to solve this issue. How to solve this issue and get 200 ok response in the swagger without doing this solution. 

[dknezic]

If it really is a CORS error, you should see errors in the browser's developer console. Additionally you can use the API Proxy debug to see which policies are running in your API proxy, and what headers are getting returned (along with the responses your browser gets in the browser developer tools network view). It could be you have added the policy but it's not adding the header on all requests for example?

Additionally, you have mentioned something about accepting certificates? Do you have more details on this and the error message you see?

[Fasaiel]

I got these error in the console 

and this issue in the security 

where i could set the SameSite attribute? 

[dchiesa1]

CERT_AUTHORITY_INVALID suggests that the site you are trying to reach (with the fetch call maybe?) is presenting an invalid certificate.  Or one that is untrusted. 

Or, it's possible that error is completely separate from the "failed to fetch" error, and the "failed to fetch" is happening only because of a CORS failure.  

[Fasaiel]

I think its CORS issue because I ‘ve tried to call the API from online swagger editor and the same error displayed. 
I thought that I have added the CORS correctly.but it seems that I’m missing something here. 
any suggestion about what cors should i add ? 

[dchiesa1]

you said you are seeing a CORS error...

even though the CORS is enabled already in the APIGEE proxy and the URL is https in both of swagger and APIGEE proxy.

It seems from what you observe, the browser treats the the CORS response from Apigee as insufficient. You can use Apigee trace to see exactly what is being sent back, and when. Also you may wish to use Chrome/Edge/Safari developer tools to see what the browser thinks.

If you are on Apigee X you can use the new CORS policy, it's really simple to use (here is a screencast). If using Edge, then it's more complicated. You need to attach the AssignMessage policy in multiple places. Consult the documentation for details.

To solve your problem, whether you are using X or Edge, I'd suggest relaxing your CORS policy restrictions to the max - allow any origin, any header, etc etc. Basically back off all the restrictions. Then. invoke from the devportal or from swagger.io or whatever. Then gradually add in restrictions one by one, testing each time, to see where the problem is . It could be a header, or a verb, or etc. Any of the CORS elements.

One thing that surprised me - you must include CORS response headers in all responses from the endpoint. Not only from the OPTIONS call (the so-called "preflight" call). So look out for that.

[Fasaiel]

the previous attached screen is from using edge and even the chrome are displaying the same error message in the console. 

Then I used Firefox and the error displayed in the console as the attached screenshot

I have tried to play with the CORS headers, Methods , Origin , MAX and the error or "Undocumented: Failed to fetch" still exist. 

[dknezic]

Based on that screenshot it looks like what Dino mentioned - you must include CORS response headers in all responses from the endpoint. Not only from the OPTIONS call (the so-called "preflight" call). So look out for that.

Again, 1. double check with trace/debug in Apigee to ensure CORS headers are always getting added. 2. Look at the response headers coming back in the browser's network view.

[dknezic]

It sounds like it might be more related to your host / certificates. Which Apigee are you using eg Apigee Edge or Apigee X? Are you using an Apigee provided host or one you have configured yourself?

[Fasaiel]

I'm using APIGEE provided host. 

[Fasaiel]

@dknezic    , @dchiesa1 

I found this issue in the under network section with Disabled value.

is that mean that I need to add certificate of something?

[dchiesa1]

Getting CORS right can be tricky.

Something in the CORS response from your endpoint is convincing the user-agent (Chrome) to not allow the call.

The. problem can be in the preflight response, or it can be in ANY OTHER RESPONSE. The CORS headers must be present in all responses. The user-agent will interpret the response headers from every request. 

The problem can be a missing CORS response header, or a header that is present but does not have the right value. As you know there are CORS headers for the method, the inbound and outbound headers, the origin.  And all of this stuff can be cached according to the access-control-max-age header. It's tricky to get it all right.

I don't know how to coach you beyond what I provided above. You may want to just try with your own server or endpoint.  Get a CORS test page like this one, point it at a mini app that you build, something in nodejs or C# or whatever. Something you can rapidly change.  That server should support the CORS preflight and the CORS headers on all other responses. Then play around with the settings.  Change what the server sends back.  Change what the client sends.  This will allow you to truly understand all the CORS response headers and so on. 

If you don't like that idea you can do the same thing with an Apigee endpoint, but it can be slower to iterate with changes, because each change requires a redeployment. 

Take your time. You may wish to re-read the CORS Spec.

good luck!