blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

I have yet to be able to replicate the issue so I can't speak to this issue or resolving it first hand.

As you noted the Drupal 8 issue can be resolved in the services file but since Drupal 7 doesn't have that capability, you might have a look at the D7 CORS module and see if it resolves the issue: https://www.drupal.org/project/cors

Graeme, if you manage to resolve this issue with the Drupal 7 CORS module, let me know so I can add it to the documentation. I'm not sure what causes the CORS issue. It only seems to happen every rare once in a thousand times but I'd like to have as much knowledge on hand to resolve it when it does.

Cheers,
Andrew

Graeme,
It appears that the problem has been identified and fixed in the latest version of the Simple Instagram Feed Library, version 3.0.2. I've just been testing it and updating to the latest version does indeed fix it. You'll need to clear caches and then you'll need to reconfigure the blocks to make sure all of the settings are set correctly.

https://github.com/jsanahuja/jquery.instagramFeed

It looks like updating to 3.0.2 version resolves the problem. Remember to activate CORS module on D7 or cors.config for D9.

I've added a notice to the main module page and I've added pages within the docs that discuss the CORS issue so I'm going to close this issue.

Graeme, feel free to reopen the issue if updating the library and clearing caches doesn't fix the problem. It may be that we need to look at that Drupal 7 CORS module but I have experienced the problem and resolved it with the latest library from Github.

Cheers,
Andrew

You need to connect the cors service in the services.yml file
cors.config:
class: Drupal\cors\CorsConfig
enabled: true
# Specify allowed headers, like 'x-allowed-header'.
allowedHeaders: [ '*' ]
# Specify allowed request methods, specify ['*'] to allow all possible ones.
allowedMethods: [ '*' ]
# Configure requests allowed from specific origins.
allowedOrigins: ['http://localhost:8081', 'http://localhost:8082','http://localhost:8083'] # This should contain the address of your server from which you will take the data
# Sets the Access-Control-Expose-Headers header.
exposedHeaders: false
# Sets the Access-Control-Max-Age header.
maxAge: false
# Sets the Access-Control-Allow-Credentials header.
supportsCredentials: false

@v.koval,
If that works, that would be great. Can you come up with a patch so we can test it out?

Cheers,
Andrew

I can't do a patch here because it's a services.yml file. Here is a step-by-step instruction to configure Cors:
1) In the default.services.yml or development.services.yml file, you need to add this code:

parameters:
http.response.debug_cacheability_headers: true
# Configure Cross-Site HTTP requests (CORS).
# Read https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
# for more information about the topic in general.
# Note: By default the configuration is disabled.
cors.config:
enabled: true
# Specify allowed headers, like 'x-allowed-header'.
allowedHeaders: [ '*' ]
# Specify allowed request methods, specify ['*'] to allow all possible ones.
allowedMethods: [ '*' ]
# Configure requests allowed from specific origins.
allowedOrigins: [ 'http://localhost:8081', 'http://localhost:8082','http://localhost:8083' ]
# Sets the Access-Control-Expose-Headers header.
exposedHeaders: false
# Sets the Access-Control-Max-Age header.
maxAge: false
# Sets the Access-Control-Allow-Credentials header.
supportsCredentials: false

2) Make sure that the services.yml file is connected to settings.php. For example, I connected cors in the development.services.yml file, so you need to add this to settings.php - $settings['container_yamls'][] = DRUPAL_ROOT . '/sites/development.services.yml';

I want to drop this here because it is something I've had trouble with since CORS was added to Drupal.

1. Your services.yml DOES NOT go in the sites directory, it goes in the site you are using (usually default) and you can have a different one per site.
2. allowedHeaders, allowedMethods and allowedOrigins are all arrays of strings so to allow all use ['*'] (not [*] or *).
3. Most important, a / on the end of the domain is a different domain so add them both to the array to make sure.

Number 3 has caused me years of trouble, hope it helps someone.