使用 ajax asp.net 调用 Web 服务答案

【问题标题】：Call a web service whith ajax asp.net使用 ajax asp.net 调用 Web 服务
【发布时间】：2021-05-27 15:17:01
【问题描述】：

我有一个问题：

我尝试调用一个用 VB.NET 编写的 Web 服务：

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

之所以有效，是因为我在其他程序中使用它。

问题是在另一个程序WebForm1.aspx 中，我尝试用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>

但是每次它进入Ajax，我都会从函数中得到一个错误：

从源“http://localhost”访问“http://localhost/WebService1.asmx/Popola”的 XMLHttpRequest 已被 CORS 策略阻止：不存在“Access-Control-Allow-Origin”标头请求的资源。

我能做什么？

【问题讨论】：

标签： asp.net ajax vb.net web-services

【解决方案1】：

据我了解，您编写的代码属于同一个项目。所以你可以像下面这样修改调用

更改下面的行

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

到

url: "WebService1.asmx/Popola",

它应该可以工作。

【讨论】：

不，不幸的是，它们是 2 个不同项目的 2 个不同代码，我删除了 localhost 的代码但不同。我忘了指定
您正在编写 webmethod 的应用程序是什么类型的。你需要在那边implement CORS policy。

【解决方案2】：

看来你需要使用JSONP作为数据类型和crossDomain=true如下：

$.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");
    }
});

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

【讨论】：