Call a web service whith ajax asp.net

Question

I have a problem:

I try to call a web service written in VB.NET:

Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.ComponentModel
Imports Newtonsoft.Json
<System.Web.Script.Services.ScriptService()>
<System.Web.Services.WebService(Namespace:="http://tempuri.org/")>
<System.Web.Services.WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)>
<ToolboxItem(False)>
Public Class WebService1
    Inherits System.Web.Services.WebService

 <WebMethod()>
    Public Function Popola(cia As String) As Object

        Dim p1 As New Persona
        p1.cognome = cia
        p1.nome = "mario"
        p1.eta = 22

        Dim p2 As New Persona
        p2.cognome = "bianchi"
        p2.nome = "luca"
        p2.eta = 99

        Dim list As New List(Of Persona)
        list.Add(p1)
        list.Add(p2)

        Return JsonConvert.SerializeObject(list, Formatting.Indented)

    End Function

It works because I use it in other programs.

The problem is when in a other program WebForm1.aspx, I try to call it with Ajax

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication2.WebForm1" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
    <link href="StyleSheet1.css" rel="stylesheet" />
    

    

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#button_login").click(function () {          // al click del bottone
                $.ajax({
                    type: "POST",                   // il method
                    url: "http://localhost/WebService1.asmx/Popola",                // la action

                    data: { cia: 88 },
                    contentType: "application/x-www-form-urlencoded",
                    dataType: "json",
                   
                    success: function () {
                        alert("ok")
                       

                    },
                   
                    error: function () {
                        console.log(arguments);
                        console.log("error");
                    }
                });

            });
        });
    </script>
</head>
<body>

    <form runat="server">
        <div class="container">
            <div class="row">
                <div class="col-sm-6">

                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                    <asp:Button ID="button_login" runat="server" Text="Button" />

                </div>

            </div>
        </div>
    </form>
</body>
</html>

but every time it enters into Ajax, I get an error from the function:

Access to XMLHttpRequest at 'http://localhost/WebService1.asmx/Popola' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

What can I do?

score 0 · Answer 1 · answered Feb 25 '21 at 10:20

0

As I understand form you code they are part of same project. So you can modify the call like below

Change the line below

url: "http://localhost/WebService1.asmx/Popola",

to

url: "WebService1.asmx/Popola",

It should work.

answered Feb 25 '21 at 10:20

शेखर

17,412
13
61
117

no unfortunatelly they are 2 different code of 2 different project i remove the code of the localhost but is different.i forgot to specify – gabbtte Feb 25 '21 at 10:31
what kind of application is where you are writing webmethod. You need to [implement CORS policy](https://learn.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api#:~:text=You%20can%20enable%20CORS%20per,API%20controllers%20in%20your%20application.&text=To%20enable%20CORS%20for%20a,attribute%20on%20the%20action%20method.) over there. – शेखर Feb 25 '21 at 10:39

score 0 · Answer 2 · answered Feb 25 '21 at 10:39

It seems you need to use JSONP as data type and crossDomain=true as following:

$.ajax({
    type: "POST",
    url: "http://localhost/WebService1.asmx/Popola",
    data: { cia: 88 },
    contentType: "application/x-www-form-urlencoded",
    dataType: "jsonp",
    crossDomain:true,
    success: function () {
        alert("ok");
    },
   
    error: function () {
        console.log(arguments);
        console.log("error");
    }
});

See: Ajax Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource

Call a web service whith ajax asp.net

2 Answers2