首页 > 解决方案 > 将 React 站点托管在与 WCF 服务相同的文件夹中

问题描述

我已经通过 GoDaddy 在共享 Windows 主机上设置了现有的 WCF 服务,并且我希望将 React 应用程序上传到同一主机以使用该服务。

因此,例如,我设置了服务https://example.com/Service1.svc/,当您进入时,https://example.com我希望反应应用程序可见,并且仍然能够通过现有 url 访问服务。

我不确定如何配置我的 web.config 来满足这个要求。导航到根域会给我一个 404 错误,尝试导航到 index.html 也会给我一个 404 错误,尽管该文件存在。如果我清除我的 web.config,react 站点正常工作,但显然该服务不再工作。

以下是我的网络配置:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.web>
    <trust level="Full" originUrl="" />
    <compilation debug="true" targetFramework="4.0" />
  </system.web>
  <system.web.extensions>
    <scripting>
      <webServices>
        <jsonSerialization maxJsonLength="50000000" />
      </webServices>
    </scripting>
  </system.web.extensions>
  <system.serviceModel>
    <services>
      <service name="MyService.Service1" behaviorConfiguration="web">
        <endpoint address="" behaviorConfiguration="web" binding="webHttpBinding" bindingConfiguration="httpBinding"
          contract="MyService.IService1" />
        <endpoint address="" behaviorConfiguration="web" binding="webHttpBinding" bindingConfiguration="httpsBinding"
          contract="MyService.IService1" />
      </service>
    </services>
    <behaviors>
      <serviceBehaviors>
        <behavior name="web">
          <serviceMetadata httpGetEnabled="false" />
        </behavior>
      </serviceBehaviors>
      <endpointBehaviors>
        <behavior name="web">
          <webHttp helpEnabled="true" defaultBodyStyle="Bare" faultExceptionEnabled="true"
            automaticFormatSelectionEnabled="true" />
        </behavior>
      </endpointBehaviors>
    </behaviors>

    <serviceHostingEnvironment multipleSiteBindingsEnabled="true" aspNetCompatibilityEnabled="true" />
    <bindings>
      <webHttpBinding>
        <binding name="httpBinding">
          <security mode="None" />
        </binding>
        <binding name="httpsBinding">
          <security mode="Transport" />
        </binding>
      </webHttpBinding>
    </bindings>
  </system.serviceModel>
  <system.webServer>
    <modules runAllManagedModulesForAllRequests="true" />
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS" />
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
      </customHeaders>
    </httpProtocol>
    <staticContent>
      <clear />
      <mimeMap fileExtension="." mimeType="*/*" />
      <mimeMap fileExtension=".txt" mimeType="*/*" />
      <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
  </system.webServer>
</configuration>

或者,我发现我可以将服务放在子文件夹中并配置一个虚拟目录,以便它在那里工作,但是这会更改http://example.com/subfolder/Service1.svc在此阶段不希望使用的服务的 URL。有什么办法可以让原始 URL 以某种方式指向子文件夹中的服务?

任何帮助,将不胜感激。

标签: reactjswcfshared-hosting

解决方案


我想我想通了。起初,我认为这与服务中的某些配置阻止了其他所有内容有关,事实证明我几乎是对的,除了它与服务本身无关,与网络的这一部分有关.config:

    <staticContent>
      <clear />
      <mimeMap fileExtension="." mimeType="*/*" />
      <mimeMap fileExtension=".txt" mimeType="*/*" />
      <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>

具体来说,该<clear />行清除了现有的内容处理程序,因此服务器甚至无法提供构成反应站点的 HTML 和 js 文件。


推荐阅读