无法在 ASP.Net 中执行跨域请求

Question

我创建了两个 Web 项目，分别命名为 WebJSONSender(port 82) 和 WebConsumer(port 85)。使用 JSON 序列化程序和 WCF，我可以从 WebJSONSender 发送 JSON，并在我的 WebJSONSender 网页中使用它（使用 jQuery 和/或 AngularJS）。

当我尝试从 WebConsumer 访问相同的部分时，它告诉我

XMLHttpRequest 无法加载 http://localhost:82/App_Dynamic_Resource~PREST,app.rest.user.svc/DoWork。请求的资源上不存在 Access-Control-Allow-Origin 标头。 Origin http://localhost:85 因此不允许访问。

我在 Google 和 StackOverflow 上进行了搜索，但收到的很多回复都是使用 JSONP、一些 CORS 内容以及其他我无法理解的内容（我的错）。

我尝试在我的 $http (angular) 调用中添加以下内容，但没有成功。

headers:
{ 
    'Access-Control-Allow-Origin':'*' , 
    'Access-Control-Allow-Methods':'GET, POST'
}

我尝试将一些部分放入我的 web.config（端口 82）中，但没有成功。现在我已经删除了这两项更改。

我想问一下我需要进行哪些更改以及在哪个应用程序中（端口 82 和/或端口 85）。

Answer 1

我得到的终于解决了。

这个问题有两种解决方案。另请注意，在我的情况下，必须在您要访问的服务器上进行设置 WebJSONSender(port 82)。您可以使用 web.config 或 Global.asax 文件。我不知道为什么，但是当我使用 web.config 或 Global.asax 尝试它时它没有工作。

但是当我同时尝试两者时，它就像魅力一样。

web.config

<system.webServer>
    <httpProtocol>
        <customHeaders>
            <add name="Access-Control-Allow-Origin" value="*" />
            <add name="Access-Control-Allow-Headers" value="Content-Type" />
      </customHeaders>
    </httpProtocol>
</system.webServer>

Global.asax

protected void Application_BeginRequest(object sender, EventArgs e)
{
    //Allow Access Control from all origins
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
    //Only if HttpMethod is Options (pre-flight OPTIONS call sent by browser in some cases and jQuery) Allow Cross Site Requests for GET/POST
    if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
    {
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST");
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
        //This is only to allow browser to cache this response and send pre-flight request only after 20 days (you can change it as per your convenience)
        HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
        HttpContext.Current.Response.End();
    }
}

理想情况下，它们都在做同样的事情，但 Global.asax 中的一个例外是它仅在 OPTIONS HttpMethod（飞行前请求）的情况下发送此额外响应。我认为我的应用程序中的一些其他设置阻止了它更早地正常工作。

Answer 2

浏览器无法进行跨域 JavaScript 调用。这样做是为了避免cross-site scripting 调用。

我见过的最常见的工作是使用JSONP。我不确定你读了什么或者你为什么不明白。在 AngularJS 的上下文中，使用 JSONP 辅助方法非常容易。

JSONP 调用本质上与 get 调用相同；因此，使用所有相关的 URL 参数创建 URL 并进行调用：

$http.jsonp('http://mydomain.com/myendpoint.aspx?someparameter=value&otherparameter=value2&callback=JSON_CALLBACK').
success(function(data, status) {
      console.log(status);
      console.log(data);
    })
)'

要记住的是，AngularJS 中的 JSONP 回调函数是一个固定值，并且必须始终是 JSON_CALLBACK。您可能需要重新编写服务器端代码以包装 JSONP 函数中返回的结果，如下所示：

JSON_CALLBACK(myExpectedResults);

AngularJS 辅助方法使 JSONP 调用所需的许多“设置”都消失了。否则你必须创建自己的回调函数：

function JSON_CALLBACK(data){
  // processing callback data here
}

这有帮助吗？