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

Created on 2 March 2021, over 3 years ago
Updated 26 April 2023, over 1 year ago

I'm receiving the error

Access to XMLHttpRequest at 'https://www.instagram.com/[accountname]/' from origin 'https://[domainname]' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

It looks like this came up in the Drupal 8 version ( https://www.drupal.org/project/simple_instagram_feed/issues/3158014 β†’ ), is there a fix or guide for how to solve this in Drupal 7?

Cheers,
Graeme.

πŸ› Bug report
Status

Closed: works as designed

Version

1.6

Component

Code

Created by

πŸ‡¬πŸ‡§United Kingdom geefin

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • πŸ‡ΊπŸ‡¦Ukraine v.koval

    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

  • πŸ‡¨πŸ‡¦Canada awasson

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

    Cheers,
    Andrew

  • πŸ‡ΊπŸ‡¦Ukraine v.koval

    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';

  • πŸ‡¬πŸ‡§United Kingdom dave_______1

    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.

Production build 0.71.5 2024