Question

问题背景：

我有一个带有单个View的Basic MVC应用程序，它使用AJAX请求来调用在Azure中托管的简单WepApi应用程序。 WebApi用于呈现在AJAX请求的Success methof中打开的pdf文档。

问题：

当我调用WebApi网址时，我在Chrome控制台中收到以下错误：

@{
ViewBag.Title = "PdfButtonCaller";
}

<script src="~/Scripts/jquery-1.8.2.min.js"></script>

<h2>PdfButtonCaller</h2>

<button id="pdfClick">Click this</button>

<script>
    $(document).ready(function () {

        $('#pdfClick').click(function () {

            alert('clicked');

            $.ajax({
                type: "POST",
                url: 'http://xxxxxxx.azurewebsites.net/api/PdfHandler/PdfButtonCaller',
                cache: false,
                contentType: 'application/pdf',
                success: function (response) {
                    alert('worked');
                    window.open('http://xxxxxxx.azurewebsites.net/api/PdfHandler/GetPdf');
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert('Error'+ textStatus, errorThrown);
                }
            });
        });
    });
</script>

我添加了Chrome允许控制源控件插件。

守则：

包含AJAX请求的MVC视图：

public class PdfHandlerController : ApiController
{
    [System.Web.Http.HttpPost]
    public void PdfButtonCaller()
    {
        var fullPath = System.Web.Hosting.HostingEnvironment.MapPath(@"~/App_Data/readme.pdf");

        byte[] bytes = System.IO.File.ReadAllBytes(fullPath);
    }

    [System.Web.Http.HttpGet]
    public HttpResponseMessage GetPdf()
    {
        var fullPath = System.Web.Hosting.HostingEnvironment.MapPath(@"~/App_Data/readme.pdf");

        byte[] bytes = System.IO.File.ReadAllBytes(fullPath);

        var response = new HttpResponseMessage(System.Net.HttpStatusCode.OK);
        response.Content = new ByteArrayContent(bytes);
        response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf");
        return response;
    }
}

WebApi控制器：

{{1}}

非常感谢您解决此XMLHttpRequest请求错误的任何帮助。

Answer 1

在您的API中，您需要将access-control-allow-origin标头设置为您的域名或“*”。如果将其设置为实时域，则还需要将其设置为localhost（如果要测试）。但是，指定星号可能最容易，任何域都可以使用您的API。

https://msdn.microsoft.com/library/azure/7406a8ce-5f9c-4fae-9b0f-e574befb2ee9#SetHTTPheader

<set-header name="access-control-allow-origin" exists-action="skip">
    <value>*</value>
</set-header>

或者...

Response.AppendHeader("Access-Control-Allow-Origin", "*");

以下是有关CORS标准的更多信息：

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

XMLHttpRequest - Ajax请求 - 不存在“Access-Control-Allow-Origin”标头

1 个答案: