个人中心
gpt4 book ai didi

css - React 基本应用程序在本地工作，但在 Azure 中它不加载 .CSS、.Ico、.JSON

转载 作者：行者123 更新时间：2023-11-28 14:37:29 28 4
gpt4 key购买 nike

我有一个可以在本地运行的 Web 应用程序，当使用发布管道部署到 Azure 时，所有文件似乎都已正确部署 enter image description here

当我访问网站的 .css url 时，该文件未加载到浏览器中，并且出现 404 错误。

enter image description here

index.html 非常简单:

<!doctype html><html lang="en" dir="ltr"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><link rel="icon" type="image/png" sizes="32x32" href="/favicon.png"><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" rel="stylesheet" async><link async rel="stylesheet" href="/css/ionicons.min.css"><link rel="stylesheet" href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dba9bebab8aff6b2b5a8afbab5afa8bebaa9b8b3f6afb3beb6bef6bab7bcb4b7b2ba9beff5ebf5eb" rel="noreferrer noopener nofollow">[email protected]</a>/style.min.css"><link rel="stylesheet" href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99f5fcf8fff5fcedd9a8b7abb7a9" rel="noreferrer noopener nofollow">[email protected]</a>/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin="" async/><title>Isomorphic</title><link href="/static/css/main.48941814.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="/static/js/main.b47e17ce.js"></script></body></html>

如第一个屏幕截图所示，文件就在那里:

我唯一能想到的是 web.config 有问题，它不允许提供 .css 或其他类型的文件？:

<?xml version="1.0" encoding="utf-8"?>
<!--
     This configuration file is required if iisnode is used to run node processes behind
     IIS or IIS Express.  For more information, visit:

     https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
-->

<configuration>
  <system.webServer>
    <!-- Visit http://blogs.msdn.com/b/windowsazure/archive/2013/11/14/introduction-to-websockets-on-windows-azure-web-sites.aspx for more information on WebSocket support -->
    <webSocket enabled="false" />
    <handlers>
      <!-- Indicates that the server.js file is a node.js site to be handled by the iisnode module -->
      <add name="iisnode" path="server.js" verb="*" modules="iisnode"/>
    </handlers>
    <rewrite>
      <rules>
        <!-- Do not interfere with requests for node-inspector debugging -->
        <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
          <match url="^server.js\/debug[\/]?" />
        </rule>

        <!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
        <rule name="StaticContent">
          <action type="Rewrite" url="public{REQUEST_URI}"/>
        </rule>

        <!-- All other URLs are mapped to the node.js site entry point -->
        <rule name="DynamicContent">
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
          </conditions>
          <action type="Rewrite" url="server.js"/>
        </rule>
      </rules>
    </rewrite>

    <!-- 'bin' directory has no special meaning in node.js and apps can be placed in it -->
    <security>
      <requestFiltering>
        <hiddenSegments>
          <remove segment="bin"/>
        </hiddenSegments>
      </requestFiltering>
    </security>

    <!-- Make sure error responses are left untouched -->
    <httpErrors existingResponse="PassThrough" />

    <!--
      You can control how Node is hosted within IIS using the following options:
        * watchedFiles: semi-colon separated list of files that will be watched for changes to restart the server
        * node_env: will be propagated to node as NODE_ENV environment variable
        * debuggingEnabled - controls whether the built-in debugger is enabled

      See https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config for a full list of options
    -->
    <!--<iisnode watchedFiles="web.config;*.js"/>-->
  </system.webServer>
</configuration>

最佳答案

我会查看StaticContent规则，它似乎重写了对public文件夹的所有请求，并且从您发布的控制台图像来看，您的静态内容不在公开下。

希望对你有帮助!

关于css - React 基本应用程序在本地工作，但在 Azure 中它不加载 .CSS、.Ico、.JSON，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53291035/

28 4 0
文章推荐： Swift XMLParser//根据元素&属性选择节点
文章推荐： ios - Swift iOS -CollectionView 如何将单元格滚动出屏幕
文章推荐： swift - Xcode 9.4 不显示单元测试
文章推荐： javascript - Bootstrap 模式在长列表中的位置
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com