0

The image refused to show it kept on showing me the same error:

net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 307.

I am fetching them from https://forkify-api.herokuapp.com/api/v2/recipes?search=pizza. Any help or way around it?

The error message for all the images from the API is :

net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 307.

KingpinG
  • 1
  • 1
  • you should set the `Cross-Origin-Embedder-Policy` https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy – Xiduzo Sep 20 '22 at 21:28
  • actually i am not experiencing any issue by following your link. this has nothing to do with the endpoint itself but must be an issue related to how you call the service – Lelio Faieta Sep 21 '22 at 10:57

1 Answers1

0

First, i want to let you know that i'm a beginner in JS.

But yeah, i will try to resolve this problem.

In programming, we should to know about CORS, COEP, and a few things about the same-origin policy.

The same-origin policy is a critical security mechanism that restricts how a document or script loaded from one origin can interact with a resource from another origin.

It helps us to isolate potentially malicious documents, and reducing possible attack vectors.

In this case, we have error

net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 307.

Which is still in scope of CORS, Cross-Origin Resource Sharing

Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources. CORS also relies on a mechanism by which browsers make a "preflight" request to the server hosting the cross-origin resource, in order to check that the server will permit the actual request. In that preflight, the browser sends headers that indicate the HTTP method and headers that will be used in the actual request.

Now, give me a minute to tell about definition of CORP, Cross-Origin Resource Policy.

Cross-Origin Resource Policy is a policy set by the Cross-Origin-Resource-Policy HTTP header that lets web sites and applications opt in to protection against certain requests from other origins (such as those issued with elements like and ), to mitigate speculative side-channel attacks, like Spectre, as well as Cross-Site Script Inclusion attacks.

We need to understand about that, before we take a step to COEP, Cross-Origin-Embedder-Policy

The HTTP Cross-Origin-Embedder-Policy (COEP) response header prevents a document from loading any cross-origin resources that don't explicitly grant the document permission (using CORP or CORS).

I have to apologize to you because i'm still didn't have any solution. But hope it will help you to trace this problem.

Thank you

Taufik Romadhon
  • 185
  • 10