Question

我创建了两个Web项目，将它们命名为 WebJSONSender（端口82）和 WebConsumer（端口85）。使用JSON Serializers和WCF我可以从WebJSONSender发送JSON并在WebJSONSender的网页中使用它（使用jQuery和/或AngularJS）。

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

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

我在Google和StackOverflow上搜索过，但我收到的很多回复都是使用JSONP，一些CORS和其他我无法理解的东西（我的错误）。

我尝试将以下内容放入我的$ http（有角度）调用中，但没有成功。

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

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

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

Answer 1

我终于解决了。

这个问题有两个解决方案。另请注意，必须在您要访问的服务器上进行设置 WebJSONSender（端口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
}

这有帮助吗？

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

2 个答案: