CORS issue, trying to expand "header" #16

andybuki · 2023-01-16T08:45:13Z

andybuki
Jan 16, 2023

Hi Johannes, I want to ask you, about one CORS issue, that I get, trying to expand your index.html file.

I suggest adding a footer and header to the already existing index.html.

It works but, I get the following issue:

pdfiiif-test.crossasia.org/:1 Access to XMLHttpRequest at 'https://crossasia.org/?type=1001' from origin 'https://pdfiiif-test.crossasia.org' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

jquery-1.12.4.min.js:4 GET https://crossasia.org/?type=1001 net::ERR_FAILED

In the header, the image carousel should work, but because of CORS issue, it doesn't work properly (https://crossasia.org/).

I tried different ways:

docker run -e "ENABLE_CORS=true"
add block of code to server.ts in pdiiif-api

  // Only allow access to Prometheus metrics endpoint from localhost
app.use('/metrics', (req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
  if (req.ip === '127.0.0.1') {
    next();
  } else {
    res.status(403).send();
  }
});

If you have any ideas, please let me know.

Answered by jbaiter

Jan 17, 2023

Oh, you need to build the web app before you use the index.html!

    <script type="module" src="./src/main.ts"></script>

This is not going to work, your Browser doesn't know what to do with TypeScript modules.

Here's what you need to do:

Install pnpm: npm install -g pnpm
Install all dependencies: pnpm install
Build pdiiif-lib: cd pdiiif-lib && pnpm build && cd ..
Build pdiiif-web: cd pdiiif-web && pnpm build
The index.html + JavaScript + CSS that you can then use in your own app will be in the dist subdirectory of pdiiif-web

But please be aware that the example application in pdiiif-web is not really intended to be embedded into other sites, since its styles assume that it has the whol…

View full answer

jbaiter · 2023-01-16T22:34:55Z

jbaiter
Jan 16, 2023
Maintainer

Sorry, I don't completely understand the issue, can you give me some more details?

Are you using the unmodified index.html from the dist directory?
What part of the code is requesting https://crossasia.org/?type=1001? It doesn't look like a manifest to me
What 'image carousel' are you refering to?
What does the metrics endpoint have to do with it?

0 replies

andybuki · 2023-01-17T08:50:39Z

andybuki
Jan 17, 2023
Author

Hi,
I changed your index.html, adding footer and header parts to it, to adapt it to Crossasia style.
https://crossasia.org/?type=1001 - contains Images for a header part.
I see in your code, that you use cors, but I still have an error, that I wrote in the first message.
I tried to find a solution how to solve it, and it was one recommended code block, that I added to
server.ts, but without any effort.
https://stackoverflow.com/questions/33483675/getting-express-server-to-accept-cors-request/33490521#33490521

Hier is my index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="icon" href="assets/logo.svg">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
      <script src="https://crossasia.org/sheader/js/jquery-1.12.4.min.js"></script>
      <script src="https://crossasia.org/sheader/js/jsfunc.validateform.js"></script>
      <script src="https://crossasia.org/sheader/js/bootstrap-3.3.6.min.js"></script>
      <link rel="stylesheet" href="https://crossasia.org/sheader/css/bootstrap-3.3.6.min.css">
      <link rel="stylesheet" href="https://crossasia.org/sheader/css/font-awesome.min.css">
      <link rel="stylesheet" href="https://crossasia.org/sheader/css/style-xabs.css">

    <title>CrossAsia | Home</title>
  </head>

  <body>
    <div class="crossasia-header xabs">
        
         <div id="xa-header"></div>
     
         <div class="breadcrumb">
            <div class="container">
               <span>Sie befinden sich hier:</span>
               <ul>
                  <li>
                     <a href="https://crossasia.org/">CrossAsia.org</a>
                     <span>&gt;</span>
                  </li>
                  <li>
                     <a href="https://crossasia.org/service/">Service</a>
                     <span>&gt;</span>
                  </li>
                  <li>IIIF</li>
               </ul>
            </div>
         </div>

         <style>
            .xabs .breadcrumb { margin-bottom: 0px; }
            .mx-2 a{display:none;}
            .w-24{display:none;}
            .text-lg {font-size: 18px;}
            .mt-4 {font-size: 16px;}
            .text-base {font-size:12px;}
            .h-10 {height:3.5rem;}
            .flex-grow {font-size:12px;}
            .fill-current{width:1.5rem;}
            .fill-current path{width:2rem;}
            .h-screen {height:78vh;}
            .bg-blue-400 {background-color:white;}
            .bg-green-200 {background-color:white;}
         </style>
         <script type="text/javascript">
         
            
            if(
              window.innerWidth >= 768 &&
              !/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
            {
              jQuery('#navbar .dropdown > a').click(function() {
                location.href = this.href;
              });
            }
            
            // Form data must be send as anchor params to itr search client a
            $("#search-form-itr-a").submit(function() {
              var href = $(this).attr("action");
              var target = $(this).attr("target");
              var query = $(this).find('input[name="q"]').val();
              if(target)
                window.open(href+'#/search?q='+query, target);
              else
                window.location.href = href+'#/search?q='+query;
              return false;
            });
        
            
            $(function() {
            $.ajax({
            url: "https://crossasia.org/",
            // page type 1001 delivers the menu only
            data: {
            type: '1001'
            },
            crossDomain: true,
            // send session information
            xhrFields: {
            withCredentials: true
            },
            headers: {
              "Access-Control-Allow-Origin":"*",
              "Access-Control-Allow-Methods": "GET, POST, OPTIONS, PUT, PATCH, DELETE",
              "Access-Control-Allow-Headers": "Authorisation, Accept, Origin, DNT, X-CustomHeader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cashe-Control, Content-Type, Content-Range, Range, X-Auth-Token"
            },
            // insert header after successfull query
            success: function(data) {
            $("#xa-header").replaceWith(data);
            }
            });
            });
            
            /*
             * Add a window event listener that reacts on viewport size changes.
             */
            window.addEventListener('resize', function() {
              if(window.innerWidth < 768) {
                jQuery('#navbar .dropdown > a').off('click');
              } else {
                jQuery('#navbar .dropdown > a').off('click').click(function() {
                  location.href = this.href;
                });
              }
            });
            
            
            			
         </script>
      </div>
    <div class="flex flex-col justify-center items-center h-screen box-border" id="app"></div>
    <script type="module" src="./src/main.ts"></script>
    <div class="footer_partners">
         <div class="container">
            <footer>
               <div class="row">
                  <div class="col-md-3">
                     <h5>Ein Dienst der</h5>
                     <div id="LogoSBB" style="display: table; height: 110px; margin: 0;">
                        <a href="http://staatsbibliothek-berlin.de/" target="_blank" title="Staatsbibliothek zu Berlin" style="display: table-cell; vertical-align: middle;">
                        <img src="https://crossasia.org/fileadmin/templates/img/LogoSBB.png" alt="Logo der Staatsbibliothek zu Berlin">
                        </a>
                     </div>
                  </div>
                  <div class="col-md-3">
                     <h5>In Zusammenarbeit mit</h5>
                     <div id="LogoUBH" style="display: table; height: 110px; padding: 0 15% 0 0;">
                        <a href="http://www.ub.uni-heidelberg.de/" target="_blank" title="Universitätsbibliothek Heidelberg" style="display: table-cell; vertical-align: middle;">
                        <img src="https://crossasia.org/fileadmin/templates/img/LogoUBH.png" alt="Logo Universitätsbibliothek Heidelberg">
                        </a>
                     </div>
                  </div>
                  <div class="col-md-3">
                     <h5>&nbsp;</h5>
                     <div id="LogoSAI" style="display: table; height: 110px;">
                        <a href="http://www.sai.uni-heidelberg.de/" target="_blank" title="Südasien-Institut" style="display: table-cell; vertical-align: middle;">
                        <img src="https://crossasia.org/fileadmin/templates/img/LogoSAI.png" alt="Logo Südasien-Institut">
                        </a>
                     </div>
                  </div>
                  <div class="col-md-3">
                     <h5>Gefördert durch</h5>
                     <div id="LogoDFG" style="display: table; height: 110px; margin: 0;">
                        <a href="http://www.dfg.de/" target="_blank" title="Deutsche Forschungsgemeinschaft" style="display: table-cell; vertical-align: middle;">
                        <img src="https://crossasia.org/fileadmin/templates/img/dfg_logo.png" alt="Logo Deutsche Forschungsgemeinschaft">
                        </a>
                     </div>
                  </div>
               </div>
            </footer>
         </div>
      </div>
      <div class="footer_copyright">
         <div class="container">
            <footer>
               <div class="footer-nav">
                  <ul>
                     <li>
                        <span>©2021 Copyright CrossAsia</span>
                     </li>
                     <li>
                        <a title="Print" href="javascript:window.print()">
                        <i class="fa fa-print">&nbsp;</i>
                        </a>
                     </li>
                     <li>
                        <a href="https://www.facebook.com/sharer.php" class="facebook" target="_blank">
                        <i id="share" title="Share" class="fa fa-share">&nbsp;</i>
                        </a>
                     </li>
                     <li>
                        <a title="favorite" href="" id="bookmarkme" rel="sidebar">
                        <i class="fa fa-star">&nbsp;</i>
                        </a>
                     </li>
                     <li>
                        <a title="RSS" href="http://blog.crossasia.org/feed/">
                        <i class="fa fa-rss">&nbsp;</i>
                        </a>
                     </li>
                  </ul>
                  <ul>
                     <li>
                        <a href="https://crossasia.org/contact/">Kontakt</a>
                     </li>
                     <li>
                        <a href="https://blog.crossasia.org/about/">Über CrossAsia</a>
                     </li>
                     <li>
                        <a href="https://crossasia.org/sitemap/">Seitenübersicht</a>
                     </li>
                     <li>
                        <a href="http://staatsbibliothek-berlin.de/extras/allgemeines/impressum/datenschutz-privacy-policy/">Datenschutz</a>
                     </li>
                     <li>
                        <a href="https://crossasia.org/impressum/">Impressum</a>
                     </li>
                  </ul>
               </div>
            </footer>
         </div>
      </div>
  </body>
</html>

0 replies

jbaiter · 2023-01-17T19:41:04Z

jbaiter
Jan 17, 2023
Maintainer

Oh, you need to build the web app before you use the index.html!

    <script type="module" src="./src/main.ts"></script>

This is not going to work, your Browser doesn't know what to do with TypeScript modules.

Here's what you need to do:

Install pnpm: npm install -g pnpm
Install all dependencies: pnpm install
Build pdiiif-lib: cd pdiiif-lib && pnpm build && cd ..
Build pdiiif-web: cd pdiiif-web && pnpm build
The index.html + JavaScript + CSS that you can then use in your own app will be in the dist subdirectory of pdiiif-web

But please be aware that the example application in pdiiif-web is not really intended to be embedded into other sites, since its styles assume that it has the whole viewport available to render itself, so this is likely not going to look really great.

Sorry for the lack of developer documentation, it's still on my To Do list.

As for the actual CORS issue: The problem is that the endpoint at https://crossasia.org/?type=1001 does not set the CORS headers. Talk to the administrators there if you want to perform AJAX requests to that domain from another domain/subdomain.

1 reply

andybuki Jan 17, 2023
Author

Thanks a lot for the detailed answer.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CORS issue, trying to expand "header" #16

{{title}}

Replies: 3 comments 1 reply

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

CORS issue, trying to expand "header" #16

andybuki Jan 16, 2023

Replies: 3 comments · 1 reply

jbaiter Jan 16, 2023 Maintainer

andybuki Jan 17, 2023 Author

jbaiter Jan 17, 2023 Maintainer

andybuki Jan 17, 2023 Author

andybuki
Jan 16, 2023

Replies: 3 comments 1 reply

jbaiter
Jan 16, 2023
Maintainer

andybuki
Jan 17, 2023
Author

jbaiter
Jan 17, 2023
Maintainer

andybuki Jan 17, 2023
Author