I want to create ajax request to one of services site with different origin. It comes from site https://seller.tokopedia.com

When I run this command in console chrome from original site it's working perfectly.

fetch("https://gql.tokopedia.com/graphql", {
  "headers": {
    "accept": "*/*",
    "accept-language": "id-ID,id;q=0.9,en-US;q=0.8,en;q=0.7,ja;q=0.6,pt;q=0.5,es;q=0.4,jv;q=0.3",
    "cache-control": "no-cache",
    "content-type": "application/json",
    "pragma": "no-cache",
    "sec-fetch-dest": "empty",
    "sec-fetch-mode": "cors",
    "sec-fetch-site": "same-site"
  },
  "referrer": "https://seller.tokopedia.com/add-product",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": "[{\"operationName\":\"jarvisRecommendation\",\"variables\":{\"productName\":\"Sepatu Pria bahan Kanvas\"},\"query\":\"query jarvisRecommendation($productName: String) {\\n  getJarvisRecommendation(product_name: $productName) {\\n    categories {\\n      id\\n      name\\n      __typename\\n    }\\n    __typename\\n  }\\n}\\n\"}]",
  "method": "POST",
  "mode": "cors",
  "credentials": "include"
});

And the response would be like this :

[{"data":{"getJarvisRecommendation":{"categories":[{"id":1847,"name":"Fashion Pria / Sepatu Pria / Loafers Pria","__typename":"CategoryList"},{"id":1844,"name":"Fashion Pria / Sepatu Pria / Sepatu Sandal  Pria","__typename":"CategoryList"},{"id":3617,"name":"Fashion Pria / Aksesoris Sepatu Pria / Tali Sepatu Pria","__typename":"CategoryList"},{"id":1846,"name":"Fashion Pria / Sepatu Pria / Slip On Pria","__typename":"CategoryList"},{"id":1850,"name":"Fashion Pria / Sepatu Pria / Pantofel Pria","__typename":"CategoryList"}],"__typename":"CategoryRecommList"}}}]

But when I place this code in my chrome extension page.

 chrome-extension://dbbfbdbejhdnddkjmnkfodoegkkkhbhd/home.html

With the same code chrome said :

This request has no response data available

And when I checked the header response it would be like this :

access-control-allow-credentials: true
access-control-allow-headers: Content-type, Fingerprint-Data, x-user-id, Webview-App-Version, Redirect, Access-Control-Allow-Origin, Content-MD5, Tkpd-UserId, X-Tkpd-UserId, Tkpd-SessionId, X-Device, X-Source, X-Method, X-Date, Authorization, Accounts-Authorization, flight-thirdparty, x-origin, Cshld-SessionID, X-Mitra-Device, x-tkpd-akamai, x-tkpd-lite-service, x-ga-id, Akamai-Bot, x-tkpd-app-name
access-control-allow-methods: GET, HEAD, PUT, PATCH, POST, DELETE
access-control-allow-origin: https://seller.tokopedia.com
content-encoding: gzip
content-length: 212
content-type: application/json
date: Wed, 03 Jun 2020 08:47:00 GMT
status: 200
vary: Accept-Encoding
x-envoy-upstream-service-time: 72
x-tkpd-srv-go: go-graphql

So i decided to modify the access-control-allow-origins to * with chrome extensions function like this :

     chrome.webRequest.onHeadersReceived.addListener(
    function (details) {
      var response = details.responseHeaders;
      if (isFromImport) {
        var header = [
          "access-control-allow-origin",
          "type",
          "access-control-allow-headers",
          //  "access-control-allow-credentials"
        ];
        header.forEach(y => {
          var exist = response.filter(x => x.name == y);
          if (exist.length > 0) {
            var index = response.indexOf(exist[0]);
            response.splice(index, 1);
          }
        });
        response.push({ name: "access-control-allow-origin", value: '*' });
       
      }
      return { responseHeaders: response };
      // return { responseHeaders: responseHeaders };
    },
    // filterschrome.webRequest.onHeadersReceived.addListener(
function (details) {
  var response = details.responseHeaders;
  if (isFromImport) {
    var header = [
      "access-control-allow-origin",
      "type",
      "access-control-allow-headers",
      //  "access-control-allow-credentials"
    ];
    header.forEach(y => {
      var exist = response.filter(x => x.name == y);
      if (exist.length > 0) {
        var index = response.indexOf(exist[0]);
        response.splice(index, 1);
      }
    });
    response.push({ name: "access-control-allow-origin", value: '*' });
  }
  return { responseHeaders: response };
},
// filters
{
  urls: ['https://tome.tokopedia.com/*',
    'https://ace.tokopedia.com/*',
    "https://m.bukalapak.com/*",
    "https://*.aliexpress.com/*",
    'https://api.bukalapak.com/*',
    "https://gql.tokopedia.com/*",
    "https://tome.tokopedia.com/*"]
  // , 'http://*/*'] 
},
// extraInfoSpec
['blocking', 'responseHeaders', 'extraHeaders'])

But when I make request fetch again, it's not working and still get no response data available.

Could you help me to solve this, so I can request this service from my chrome extensions? thanks