关于jquery：fidler绕过请求的资源错误上没有’Access-Control-Allow-Origin’标头

No 'Access-Control-Allow-Origin' header is present on the requested resource error bypassed by fidler

我需要使用我公司的身份验证服务，该服务在远程服务器上运行。我一直在尝试使用jquery AJAX对服务(API)进行ajax调用，如下所示....

1
2
3
4
5
6
7
8
9
10

var uri ="http://Company/Authentication/AuthAPI";
$.ajax(uri, {
type:"POST",
data: JSON.stringify(user),
contentType:"application/json",
success: function () {
//here reload the page so that the new vacancy will be showed
alert("logged in");
}
});

我在Chrome控制台中收到此错误...

请求的资源上没有"Access-Control-Allow-Origin"标头，

我经历了这个，并且知道我必须在服务器端将Access-Control-Allow-Origin标头设置为*或将其设置为我的域。

现在，实际的问题是，当我使用fidler打同样的身份验证服务时，一切似乎工作得很好，这是让我疯狂的家伙，请赐教

编辑：不知何故，这似乎也适用于.NET MVC代码...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

public UserData AuthenticateUser(User userDetails)
{
try
{
using (var _client = new HttpClient())
{
var result = new UserData();
_client.DefaultRequestHeaders.Accept.Add(new System.Net.Http.Headers.MediaTypeWithQualityHeaderValue("application/json"));
string subUri = Utilities.GetConfigValueFromSection(ConfigurationConstants.AuthenticationServiceSection, ConfigurationConstants.Authenticate);
var postTask = _client.PostAsJsonAsync(_uri + subUri, userDetails).ContinueWith((taskWithResponse) =>
{
var response = taskWithResponse.Result;
var readTask = response.Content.ReadAsAsync<UserData>();
readTask.Wait();
result = readTask.Result;
});
postTask.Wait();
return result;

}

}

Fidler query
Raw response

相关讨论

感谢Jai，我明白了我必须要做的事情......最后这很简单..

以下是解决方案的确切代码......

第1步：角度服务，它使用内置的$ http服务对我的web-api进行AJAX调用。

这里我的web-api是ProxyController

1
2
3
4
5
6

$http.post('/Proxy', user).then(function (response) {
successCallBack(response.data); //this is callback function
//this function handles the data returned by the API
}, function (response) {
console.log(response);
});

第2步：ProxyController实现。
这是作为代理服务器的web-api。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

public class ProxyController : ApiController
{
private string AuthenticationUri ="http://authencationserver/api/AuthenticateUser/Authenticate";
public async Task<AuthenticationResultObject> Post(UserObject user)
{
// this controller just acts as an interface between the client and the actual server.
//We are going to get the information from the actual server by making an ajax call from here
//the server address for authenticating is http://authencationserver/api/AuthenticateUser/Authenticate
//we need to hit this address with an user object

HttpClient client = new HttpClient();
HttpResponseMessage response = await client.PostAsJsonAsync(AuthenticationUri, user);

if (response.IsSuccessStatusCode)
{
var result = response.Content.ReadAsStringAsync();
var returnedObject = JsonConvert.DeserializeObject<AuthenticationResultObject>(result.Result);
//we need the above statement to deserialize the returned json to a javascript object.
//AuthenticationResultObject models the data that will be returned by the remote API
return returnedObject;
}
return null;
}
}

请参阅允许所有RestClients，但是对于javascript代码来获取数据跨域，您必须启用CORS。

另一种方法是在服务器上创建Web代理并调用该代理以从该URL获取数据并将其返回给您。

这里可能是语法错误：

1	$.ajax(uri{

将其更改为：

1 2	$.ajax({ url: uri

我仍然建议您调用上面添加的本地方法。