NekR / offline-plugin

Offline plugin (ServiceWorker, AppCache) for webpack (https://webpack.js.org/)
MIT License
4.52k stars 295 forks source link

Error: Wrong response status when i used mode: 'no-cors' #376

Open CocoaTouch123 opened 6 years ago

CocoaTouch123 commented 6 years ago

The main domain name of my website is https://a.myhost.com/. When I set up the external link https://b.myhost.com/.., I added mode: 'no-cors'. After I refreshed the page, the console reported an error.

sw.js:275 Error: Wrong response status
    at sw.js:772
    at <anonymous>
   (anonymous) @ sw.js:275
   Promise.catch (async)
   cacheAssets @ sw.js:274
   (anonymous) @ sw.js:283
   Promise.then (async)
  cacheChanged @ sw.js:281
  (anonymous) @ sw.js:211
sw.js:772 Uncaught (in promise) Error: Wrong response status
    at sw.js:772
    at <anonymous>

My configuration for this the OfflinePlugin is:

new OfflinePlugin({
      publicPath: './',
      responseStrategy: 'cache-first',
      AppCache: false,
      caches: 'all',
      ServiceWorker: {
        events: true,
        prefetchRequest: {
          mode: 'no-cors'
        }
      },
      externals: [
        'https://b.myhost.com/station/site/common/mobilehome/css/bank-module-public.css',
        'https://b.myhost.com/app_js/libs/zepto/1.2.0/zepto.min.js',
        'https://b.myhost.com/app_com/pab/1.0.0/pab.js',
        'https://b.myhost.com/station/site/common/mobilehome/js/bank-module-public.js',
        'https://b.myhost.com/omm/mobile/assets/plugins/product.js'
      ],
      version: () => null
    })

My production generated ServiceWorker file is:

var __wpo = {
  "assets": {
    "main": [
      "./static/images/dialog-downloadApp.f4999d8.jpg",
      "./static/js/app.0c28ad691829bd8a313d.js?",
      "./static/js/vendor.ce1ad217c571b938c4c3.js?",
      "./static/js/manifest.1b0a9b5bde32e885e63c.js?",
      "./static/css/app.css",
      "./",
      "https://b.myhost.com/station/site/common/mobilehome/css/bank-module-public.css",
      "https://b.myhost.com/app_js/libs/zepto/1.2.0/zepto.min.js",
      "https://b.myhost.com/app_com/pab/1.0.0/pab.js",
      "https://b.myhost.com/station/site/common/mobilehome/js/bank-module-public.js",
      "https://b.myhost.com/omm/mobile/assets/plugins/product.js"
    ],
    "additional": [],
    "optional": []
  },
  "externals": [
    "https://b.myhost.com/station/site/common/mobilehome/css/bank-module-public.css",
    "https://b.myhost.com/app_js/libs/zepto/1.2.0/zepto.min.js",
    "https://b.myhost.com/app_com/pab/1.0.0/pab.js",
    "https://b.myhost.com/station/site/common/mobilehome/js/bank-module-public.js",
    "https://b.myhost.com/omm/mobile/assets/plugins/product.js"
  ],
  "hashesMap": {
    "bc6edb3d5ea100b4e6eb7e18bd1055f34a814e75": "./static/images/dialog-downloadApp.f4999d8.jpg",
    "ea71982172db9654c2640c2f0695f485ce372a0e": "./static/js/app.0c28ad691829bd8a313d.js?",
    "4a428138e78b340a5ebdc561a63742e30c6fe49e": "./static/js/vendor.ce1ad217c571b938c4c3.js?",
    "460f4946c829d43aea3d731b2fc2babb81ed4b71": "./static/js/manifest.1b0a9b5bde32e885e63c.js?",
    "852f1c3aaaff36e3dd70e9633a826b4fe3379daa": "./static/css/app.css",
    "aaf5275b7c5b0df31d2fd1b74563afd15e13b11b": "./"
  },
  "strategy": "changed",
  "responseStrategy": "cache-first",
  "version": null,
  "name": "webpack-offline",
  "pluginVersion": "4.9.0",
  "relativePaths": false,
  "prefetchRequest": {
    "mode": "no-cors"
  }
};

Can you tell me why did this error occur?

NekR commented 6 years ago

With no-cors response status is unknown and is reported with 0. Which isn't 200. Basically, ServiceWorker isn't able to detect if resource fetching errored or not, so offline-plugin doesn't cache such resources.

Use cors at setup CORS headers on your second domain.

CocoaTouch123 commented 6 years ago

Thank you very much for answering my question. but the b site related resources are external resources, I am not the owner, offline-plugin how to set it

If you don't set mode:"no-cros", my homepage will complain:

Failed to load https://b.myhost.com/station/site/common/mobilehome/css/bank-module-public.css:
The 'Access-Control-Allow-Origin' header contains the invalid value '0'. Origin ' https://a.myhost.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.

If sw Caches all of the site's home page, how can offline-plugin notify the client if the index.html changes?

NekR commented 6 years ago

Thank you very much for answering my question. but the b site related resources are external resources, I am not the owner, offline-plugin how to set it

Well, you either move it to your domain or don't cache them at all in this situation. You may also setup cacheMaps to redirect external domain requests to local/cached requests when ServiceWorker is used.

If sw Caches all of the site's home page, how can offline-plugin notify the client if the index.html changes?

Not sure how this is related.