Cross origin resource policy not set

[LaraMateo]

🆘 Error description

When running this code:

import React from "react";
import { MapContainer, TileLayer } from "react-leaflet";
const Map = () => {
  const position = [45.52007, -122.79014];
  return (
    <MapContainer center={position} zoom={13} animate={true}>
      {" "}
      <TileLayer
        attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
        url="https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png"
      />{" "}
    </MapContainer>
  );
};
export default Map;

I am getting the following network message:
To use this resource from a different origin, the server needs to specify a cross-origin resource policy in the response headers: Cross-Origin-Resource-Policy: same-siteChoose this option if the resource and the document are served from the same site. Cross-Origin-Resource-Policy: cross-originOnly choose this option if an arbitrary website including this resource does not impose a security risk.

🖥️ Configuration

Software	Version
Windows	win10-x64 21H1
npm	6.14.13
node	v14.17.0
Parcel	2.0.0-rc.0

package.json

{
  "name": "bikey-tracking-web",
  "version": "1.0.0",
  "description": "Bikey tracking web application for users and administrators",
  "main": "dist/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "npm-run-all --parallel watch:start watch:css",
    "watch:start": "parcel serve ./public/index.html",
    "watch:css": "tailwindcss -i ./src/index.css -o src/assets/tailwind/tailwind.css --watch",
    "build": "yarn execute:css && yarn execute:build",
    "execute:build": "parcel build ./public/index.html --target default",
    "execute:css": "export NODE_ENV=production || SET NODE_ENV=production && tailwindcss -i ./src/index.css -o src/assets/tailwind/tailwind.css --minify",
    "init:amplify": "amplify init && amplify import auth && amplify push",
    "restart:amplify": "amplify remove auth && amplify import auth && amplify push"
  },
  "keywords": [],
  "author": "IAS I+D+I Bikey",
  "license": "ISC",
  "devDependencies": {
    "@babel/runtime": "^7.15.3",
    "@parcel/packager-raw-url": "^2.0.0-rc.0",
    "@parcel/transformer-image": "^2.0.0-rc.0",
    "@parcel/transformer-webmanifest": "^2.0.0-rc.0",
    "autoprefixer": "^10.3.4",
    "cssnano": "^5.0.8",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-config-standard": "^16.0.3",
    "eslint-import-resolver-parcel2": "^1.0.1",
    "eslint-plugin-import": "^2.24.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.1.0",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "npm-run-all": "^4.1.5",
    "parcel": "^2.0.0-rc.0",
    "postcss": "^8.3.6",
    "postcss-import": "^14.0.2",
    "postcss-modules": "^4.2.2",
    "prettier": "^2.3.2",
    "tailwindcss": "^2.2.7"
  },
  "dependencies": {
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "aws-amplify": "^4.2.4",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-leaflet": "^3.2.1",
    "react-lottie": "^1.2.3",
    "react-router-dom": "^5.2.1"
  },
  "browserslist": {
    "production": [
      "last 2 chrome version",
      "last 2 firefox version",
      "last 2 safari version"
    ],
    "development": [
      "last 2 chrome version",
      "last 2 firefox version",
      "last 2 safari version"
    ]
  },
  "targets": {
    "default": {}
  }
}

🤔 How to solve this?

[jack3898]

I can't remember where I got this solution from but create a file in the root of your project called ".proxyrc.js" and paste the following in:

module.exports = function (app) {
  app.use((req, res, next) => {
    res.removeHeader('Cross-Origin-Resource-Policy');
    res.removeHeader('Cross-Origin-Embedder-Policy');
    next();
  });
};

Let me know if that works!

If someone could advise me on why this works for me? I am not sure why it does.

[Rho-bur]

Yes but by disabling those headers you'll get the famous sharedArrayBuffer missing in browser.
The optimal solution would be to preserve the sharedArrayBuffer functionality and be able to use js files from external CDN which now seems impossible,

[jack3898]

Can you tell me when I am likely to encounter that error and what problems it will cause?

So far it hasn't been an issue but I want to keep an eye out.

At the very least my above solution works in a development environment only! Not to discredit what you say of course. :)

[Rho-bur]

It will affect you only if you use (like I do) libraries that need the sharedArrayBuffer (which is disabled in newer browsers by default), an example of such library being ffmpeg.wasm.
Otherwise, no worries.

[jack3898]

Ah thanks that's great to know!!