Problem with "Access-Control-Allow-Origin"

Hi all!
I have a problem accessing an API shared by iTunes. The API is to get an RSS feed and/or search items in iTunes. To access iTunes, I need to parse a query through a URL and expect response in json format.

When the URL is parsed in Preview Mode, the “fetch” is successfully carried out and I get the response in json format.

However if i parse it in Published sited using wix-fetch, i get an error shown below:
“Failed to load https://itunes.apple.com/search?term=jack+johnson: The ‘Access-Control-
Allow-Origin’ header has a value ‘https://ee8f2056-10ec-4e93-a41c-88a538e70b77.dev.wix- code.com’ that is not equal to the supplied origin. Origin ‘https://lucas-marconi.wixsite.com’ is therefore not allowed access. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.”

/**** here is my code ****/

import {fetch} from 'wix-fetch';
fetch("https://itunes.apple.com/search?term=jack+johnson", 
      {
            method: "get",
            headers: 
            {
                 "Access-Control-Allow-Origin": "*",
                 "Content-Type": "application/json"
            }
      })
      .then( (httpResponse) => {
          let url = httpResponse.url;
          let statusCode = httpResponse.status;
          let statusText = httpResponse.statusText;
          let headers = httpResponse.headers;
          let bodyUsed = httpResponse.bodyUsed;
         if (httpResponse.ok) 
        {
             return httpResponse.json();
        }
        else 
        {
             return Promise.reject("Fetch did not succeed");
        }
    })
    .then( (json) => {
       /******* in  preview mode, below line gets executed *******/
        console.log(JSON.stringify(json));
    })
    .catch( (err) => {
        console.log(err);
    });

Can anybody shed some light.
Thank you in advance!

1 Like

“Access-Control-Allow-Origin”: " https://lucas-marconi.wixsite.com " ?

Hi Ethan,

Thanks for your comment but I am not sure what you are trying to say.
My guess is that:
USE “Access-Control-Allow-Origin”: " https://lucas-marconi.wixsite.com "
INSTEAD OF “Access-Control-Allow-Origin”: “*”

I tried that but I still get the same error.

if your site is not published Fetch is calling from the dev url
Also fetch requests that require CORS will only work in backend code

The error does not come up in Preview mode.
It only triggers in Published Mode.

How do I make it work in Published mode.
Is there anyone that could help me with this.

You are not giving it your origin it is using https://ee8f2056-10ec-4e93-a41c-88a538e70b77.dev.wix- code.com instead of your url. I had this same issue a while ago

fetch("https://itunes.apple.com/search?term=jack+johnson",  { method: "get", headers:  { "Access-Control-Allow-Origin": "https://lucas-marconi.wixsite.com", "Content-Type": "application/json" } }) 

I used the code below as you advised. But I still get the same error.

fetch("https://itunes.apple.com/search?term=jack+johnson", 
{
       method: "get",
       headers: 
       {
             "Access-Control-Allow-Origin": "https://lucas-marconi.wixsite.com",
             "Content-Type": "application/json"
       }
})

I finally solved it! to anyone interested to know, I put the FETCH function in the Back-end and call it from the Front-end.

Code in the Back-end:

import {fetch} from 'wix-fetch';  

export function iTunesAPI(type, criteria) {
 switch (type) {
 case "RSS-Feed":
 return fetch("https://{url to the other websites API}", 
     {
                method: "get",
                headers: 
         {
           "Access-Control-Allow-Origin": "https://lucas-marconi.wixsite.com",
           "Content-Type": "application/json"
          }
     })
     .then(httpResponse => httpResponse.json());

 default:
 break;
    } 
}

Code in the Front-end:

import iTunesAPI from 'backend/aModule_01';

//this is the code block that defines your front-end function
 export function iTunesAPI_get(strType){
    iTunesAPI(strType)
    .then(httpResponse => 
    {
        httpResponseResults = httpResponse.feed.results;
        httpResponseResults.map(httpResponseResults => 
                httpResponseResults._id = httpResponseResults.id);

        $w("#repeater3").data = httpResponseResults;
        $w("#repeater3").forEachItem( ($w, itemData, index) => 
        {
            $w("#image12").src=httpResponseResults[index].artworkUrl100.trim();
            $w("#image12").link = httpResponseResults[index].url;
            $w("#text53").text = httpResponseResults[index].name.trim();
        });
    });
};

//call the function
iTunesAPI_get("https://{url to the external website}");

Good luck!

2 Likes

I made this code above and I had the error below:

TypeError: backend_aModule__WEBPACK_IMPORTED_MODULE_0__ is not a function

use:

import {iTunesAPI} from 'backend/aModule_01';