홈>2020-02-26 08:16

c# - HTML 페이지에서 WEB API 응답을 읽을 때 오류

잘 작동하는 것처럼 보이는 자체 호스팅 WEB API가 있습니다. 아래는 짧은 구현입니다.

class Program
{
    static void Main(string[] args)
    {
        string baseAddress = "http://localhost:9000/";
        // Start OWIN host 
        using (Microsoft.Owin.Hosting.WebApp.Start<Startup>(url: baseAddress))
        {
            Console.ReadLine();
        }
    }
}
class Startup
{
    public void Configuration(IAppBuilder appBuilder)
    {
        // Configure Web API for self-host. 
        HttpConfiguration config = new HttpConfiguration();
        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
        appBuilder.UseWebApi(config);
    }
}
public class Product
{
    public string Name { get; set; }
}
public class ValuesController : ApiController
{
    Product myPro = new Product { Name = "Test 123" };
    // GET api/values 
    public IEnumerable<string> Get()
    {
        return new string[] { "value1", "value2" };
    }
    // GET api/values/5 
    public IHttpActionResult Get(int id)
    {
        return Ok(myPro);
    }
    // POST api/values 
    public void Post([FromBody]string value)
    {
    }
    // PUT api/values/5 
    public void Put(int id, [FromBody]string value)
    {
    }
    // DELETE api/values/5 
    public void Delete(int id)
    {
    }
}

웹 브라우저에서 " http : // localhost : 9000/"주소에 액세스하여 올바른 라우팅 매개 변수가 예상되는 결과를 얻습니다.

그런 다음 다음 웹 페이지를 추가했습니다 :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2/jquery.min.js"></script>
    <script>
        var uri = 'http://localhost:9000/api/values';
        function formatItem(item) {
            return item.Name;
        }
        function find() {
            var id = $('#prodId').val();
            $.getJSON(uri + '/' + id)
                .done(function (data) {
                    $('#product').text(data.Name);
                })
                .fail(function (jqXHR, textStatus, err) {
                    $('#product').text('Error: ' + err);
                });
        }
    </script>
</head>
<body>
    <div>
        <input type="text" id="prodId" size="5" />
        <input type="button" value="Search" onclick="find();" />
        <p id="product" />
    </div>
</body>
</html>

내 로컬 IIS 서버에서이 페이지를 " http : // localhost : 9998/".

자체 호스팅 WEB API를 시작한 다음 웹 페이지에서 "검색"버튼을 클릭하면 Get 액션이 호출되지만 웹 페이지에서 "Test 123"결과를 보는 대신 항상 " 다른 세부 정보가없는 오류 "메시지가 표시됩니다.

웹 페이지에 문제가 있습니까, jquery가 데이터를 가져 오는 방법 또는 구성해야 할 것이 있습니까?

이것은 모두 내 코드이며 다른 구성은 수행되지 않았습니다.

c#asp.netnetasp.net-web-api

답변 # 1
다른 포트는 다른 출처를 의미합니다. 웹 서버에서 API에 액세스 할 수 없습니다.

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

응용 프로그램 ore cors 헤더의 리버스 프록시 또는 호스트 API 및 웹 사이트가 필요합니다.

IIS에는 리버스 프록시 모듈이 있습니다 : https://weblogs.asp.net/owscott/creating-a-reverse-proxy-with-url-rewrite-for-iis

Python2.net

c# - HTML 페이지에서 WEB API 응답을 읽을 때 오류

관련 자료