Voyak
Voyak

Reputation: 176

Host frontend (react) and backend (ASP.NET Web Api) under the same Website in IIS

I have 2 applications.

I want frontend (react) to be available on url: localhost:5001/ekadry

and backend (web api in c#) to be available on url: localhost:5001/ekadryapi

This is how it looks like in IIS: enter image description here

When I go to each of these urls each app seems to be working. The problem occurs when frontend requests something from backend - then I get an error 405 Method Not Allowed:

enter image description here

The problem DOES NOT occur when backend and frontend are hosted on different ports as different Web Sites. Can someone explain it to me?

Upvotes: 1

Views: 2047

Answers (2)

Voyak
Voyak

Reputation: 176

I added this rule in web.config and now frontend can access backend. Problem solved.

    <rule name="ReactRouter Routes" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_URI}" pattern="^/ekadryapi(.*)$" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      </conditions>
      <action type="Rewrite" url="/index.html" />
    </rule>

Upvotes: 1

Atabai Fekri
Atabai Fekri

Reputation: 309

I think you have to grant access to clients in API web.config

Something like below tags:

<configuration>
<system.webServer>
   <httpProtocol>
        <customHeaders>
            <add name="Access-Control-Allow-Origin" value="*" />
            <add name="Access-Control-Allow-Headers" value="Content-Type, Token, Accept, 
            Accept-Language, Content-Language,X-ATJ-Auth-Token,X-ATJ-Username" />
            <add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" />
        </customHeaders>
   </httpProtocol>
    <handlers>
      .
      .
      .
    </handlers>
  </system.webServer>
</configuration>

Upvotes: 0

Related Questions