¿Cómo puedo cargar un webcomponent a través de dominios?

0

Pregunta

No se puede cargar webcomponents de otros dominios?

Me estoy poniendo un cors error en firefox/linux.

He añadido esto a nginx, pero todavía no puedo cargarlo:

  add_header Access-Control-Allow-Origin *;

<html lang="en">
  <head>
      <meta charset="utf-8" />
      <script type="module" src="//briskreader.com/components/feed-list.js"></script>
  </head>
  <body>
    <feed-list topic="bitcoin"></feed-list>
  </body>
</html>

Aquí está el error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://briskreader.com/components/feed-list.js. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Loading module from “http://briskreader.com/components/feed-list.js” was blocked because of a disallowed MIME type (“text/html”).
test.html
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://briskreader.com/components/feed-list.js. (Reason: CORS request did not succeed).

Heres el encabezado de briskreader.com:

$ curl -I 'https://briskreader.com/components/feed-list.js'
HTTP/2 200 
server: nginx/1.18.0 (Ubuntu)
date: Sun, 21 Nov 2021 06:30:51 GMT
content-type: application/javascript
content-length: 2187
expires: Sun, 21 Nov 2021 06:30:50 GMT
cache-control: no-cache
cache-control: no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0
access-control-allow-origin: *
accept-ranges: bytes
firefox nginx web-component
2021-11-20 05:37:14
1

Mejor respuesta

0

Componentes Web no tiene nada que ver con CORS. El atributo type="module" en <script> etiqueta hace que el CORS solicitud. A diferencia de las clásicas secuencias de comandos, módulo de secuencias de comandos requieren el uso de la CORS protocolo para la cruz de origen de la recuperación.

Junto a esta línea add_header Access-Control-Allow-Origin *; es inútil sobre el origen de dominio. Debe establecer Access-Control-Allow-Origin encabezado en briskreader.com dominio. Si usted no tiene control briskreader.com, a continuación, considere el uso de la clásica secuencia de comandos. Usted todavía puede usar los componentes Web con la clásica secuencia de comandos.

2021-11-21 06:06:13

Me puso en briskrsader y aún no funciona.
chovy

@chovy Puede compartir el encabezado de respuesta a la petición de //briskreader.com/components/feed-list.js?
Harshal Patil

actualizado pregunta, como se puede ver que tiene access-control-allow-origin: *
chovy

así que aquí está el problema. yo estaba usando http-server que utiliza http y mi servidor redirige http -> https que no trabajo para el protocolo agnóstico url supongo. Raro.
chovy

Si puedo cambiar el src atributo del módulo de // a https:// funciona bien.
chovy

Idealmente // debería funcionar. Pero que extraño. Me alegro de que trabajó para usted.
Harshal Patil

Yo upvoted (desde un -1 voto de estado). [en mi humilde palabras] // significa: hacer la solicitud con el protocolo de la solicitante está ejecutando, por lo que una página se sirve con HTTP realiza una solicitud HTTP; a continuación, el HTTPS servidor de bloque, ya que es un inseguro solicitud. Hacer un 2 minutos de búsqueda de Google y obtendrá un montón de respuestas.
Danny '365CSI' Engelman

Pensé que briskreader.com también está sirviendo en http y no sólo https.
Harshal Patil

En otros idiomas

Esta página está en otros idiomas

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Slovenský
..................................................................................................................