Como faço para carregar um webcomponent entre domínios?

Question 1

Você não pode carregar webcomponents de outros domínios?

Eu estou recebendo um cors erro no firefox/linux.

Eu adicionei este nginx, mas ainda não pode carregá-lo:

  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>

Aqui está o erro:

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).

Aqui é o cabeçalho do 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

Question 2

Web components não tem nada a ver com o CORS. O atributo type="module" no <script> tag faz com que o CORS pedido. Ao contrário do clássico scripts, módulo de scripts exigem o uso do CORS protocolo de origem cruzada de busca.

Ao lado desta linha add_header Access-Control-Allow-Origin *; é inútil sobre a origem do domínio. Você deve definir Access-Control-Allow-Origin no cabeçalho briskreader.com domínio. Se você não controlar briskreader.come , em seguida, considerar o uso clássico de script. Você ainda pode utilizar os componentes Web do clássico de script.

Harshal Patil · Answer 1 · 2021-11-21T06:06:13

Web components não tem nada a ver com o CORS. O atributo type="module" no <script> tag faz com que o CORS pedido. Ao contrário do clássico scripts, módulo de scripts exigem o uso do CORS protocolo de origem cruzada de busca.

Ao lado desta linha add_header Access-Control-Allow-Origin *; é inútil sobre a origem do domínio. Você deve definir Access-Control-Allow-Origin no cabeçalho briskreader.com domínio. Se você não controlar briskreader.come , em seguida, considerar o uso clássico de script. Você ainda pode utilizar os componentes Web do clássico de script.

Eu fiz defini-lo em briskrsader e ainda não está funcionando.
@chovy você Pode compartilhar o cabeçalho de resposta para a solicitação //briskreader.com/components/feed-list.js?
atualizado pergunta, como você pode ver tem access-control-allow-origin: *
então aqui está o problema. eu estava usando http-server que utiliza http e meu servidor http redirecionado -> https que não irá funcionar no protocolo de agnóstico urls eu acho. Estranho.
Se eu alterar o src atributo do módulo de // para https:// ele funciona muito bem.
Idealmente // deve funcionar. Mas que é estranho. Fico feliz que funcionou para você.
Eu tiver votos a favor (de um -1 voto de status). [no meu leigo, palavras] // significa: faça o pedido com o protocolo, o solicitador de execução, para uma página servido com HTTP faz uma solicitação HTTP; em seguida, o HTTPS servidor irá bloqueá-lo, pois é um ser inseguro pedido. Fazer 2 minutos de pesquisa no Google e você vai ter uma abundância de respostas.
Eu pensei que briskreader.com também está servindo no http e não apenas https.

Como faço para carregar um webcomponent entre domínios?

Pergunta

Melhor resposta

Em outros idiomas

Esta página está em outros idiomas

Popular nesta categoria

Perguntas populares nesta categoria