Docker：对 XMLHttpRequest 的访问已被 CORS 策略阻止

Question

I created an ASP.NET Web Application (.NET Framework) project in Vsual Studio 2022, and created a web service in it. Everything works if the call to the web service takes place in Locall IIS. When I put the projects in the container, nothing works.(Windows containers) What am I doing wrong? The following error appears: Access to XMLHttpRequest at 'http://localhost:5002/WebService.asmx/HelloWorld' from origin 'http://172.17.78.68' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Here is my docker-compose.yml:

version: '3.4'

services:

  saview:
    image: ${DOCKER_REGISTRY-}saview
    build:
      context: .\SAview
      dockerfile: Dockerfile
    ports:
       - 5001:80
    links:
       - saviewweb
    depends_on:
       - "saviewweb"
    networks:
       - mynetwork

  saviewweb:
    image: ${DOCKER_REGISTRY-}saviewweb
    build:
      context: .\SaviewWeb
      dockerfile: Dockerfile
    ports:
       - 5002:80
    networks:
       - mynetwork

networks:
     mynetwork: 
       driver: nat
       

This is how I make a request with javascript:

function Web(arg, url ) {  
    var result;
    
    $.ajax(
        {
            type: 'POST', url: url, data: JSON.stringify(arg),
            dataType: 'json', 
            contentType: "application/json; charset=utf-8", async: false, success: function (res) {
                result = res;
            }
            , error: function (a1, a2, a3) {
                result =
                {
                    d: "_Error_" + a1 + " " + a2 + " " + a3
                };
            }  //-
        });
    if (result.d == null)
        return null;
    if (result.d.indexOf != undefined && result.d.indexOf("_Error_") !== -1) {

        alert(result.d);
        return null;
    }
    return result;
}



Web({}, "http://localhost:5002/WebService.asmx/HelloWorld" );

Answer 1

CORS problems originate when you attempt to request a domain different than the one JavaScript is running at. Eg http://localhost:3000 and http://example.com . And is fixed in the server/API rather than in the front-end.

If they do share the domain everything would be fine.

Please reference these docs. Everything is in there https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-6.0

As mentioned in the docs adding something of the sorts to your Program.cs should do the trick:

builder.Services.AddCors(options =>
{
    options.AddPolicy(
        name: "cors-policy",
        policy  =>
            {
                policy.WithOrigins(
                    "http://172.17.78.68:<port>",
                    "http://localhost:5002"
                );
            }
    );
});
...
app.UseCors("cors-policy");

Where in WithOrigins you would want to specify all the "front-ends" that you want to be allowed to request your API.