Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at (URL)

Question

i have web application with multi layer (Business Layer,Data Access Layer ,Service Layer and Ui Layer)
i call service layer (web api) in Ui Layer Razor pages(Using JQuery And Ajax )
as

<button id="btn">ddd</button>

script type="text/javascript">
    $(document).ready(function () {
        var filmtable = $("#DataTableHtmlId");
        $('#btn').click(function() {
            $.ajax({
                type: 'GET',
                dataType: "json",
                contentType: 'application/json; charset=utf-8',
                url: 'https://localhost:11111/api/film/1',
                withCredentials: true,
                AccessControlAllowCredentials: true,

                success: function(data) {
                    alert(data);
                },
                error: function(data) {

                    alert("err");
                }
        });
        });

    } );
</script>

when call controller that fire the view that have last ajax calling
Error This Appear

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://localhost:11111/api/film/1. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).[Learn More]

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://localhost:11111/api/film/1. (Reason: CORS request did not succeed).

After Search i found many solution as Registering Cors In ConfigureServices as

            //Cors policy is added to controllers via [EnableCors("CorsPolicy")]
            //or .UseCors("CorsPolicy") globally
            services.AddCors(options =>
            {
                options.AddPolicy("CorsPolicy",
                    builder => builder
                        .AllowAnyOrigin()
                        .AllowAnyMethod()
                        .AllowAnyHeader()
                        .AllowCredentials());
            });

and Apply CORS In Configure as

        //Apply CORS.
         app.UseCors("CorsPolicy");
         app.UseHttpsRedirection();
         app.UseAuthentication();
         app.UseMvc();

But error Also Appear Any help?

Can you inform if app.UseCors("CorsPolicy") is been called before any defined endpoint (before calling UseMvc()). "CORS Middleware must precede any defined endpoint". And can you verify (using fiddle our F12) if you server response is providing "Access-Control-Allow-Origin" header when you make the request? Regards. — dime2lo
i know this Issue app.UseCors("CorsPolicy"); app.UseHttpsRedirection(); app.UseAuthentication(); app.UseMvc(); I Updated Question with adding the order of using — user3420275
Are you sure the asynchronous ajax request is working? I've made the experience, that sometimes I get this Cross-Origin Request error although there is a problem with the async call. Do you find any error under network tab in developer tools of your browser? — schlonzo
Where did you add Cors configuration? You need to add it to api project instead of ui project. — Edward
@Tao Zhou Thank You I Added It To ui project. change it And put it in api it working :) — user3420275

Edward Edward · Accepted Answer · 2018-12-19T08:32:50

0

votes

Solution From Comment

Enable CORS Configuration in api project instead of ui project.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at (URL)

1 Answers