Javascript 如何使用*jquery*客户端从另一个域发布到启用Web API2 Cors的服务器_Javascript_Jquery_Ajax_Asp.net Web Api

Javascript 如何使用*jquery*客户端从另一个域发布到启用Web API2 Cors的服务器

javascript jquery ajax asp.net-web-api

Javascript 如何使用*jquery*客户端从另一个域发布到启用Web API2 Cors的服务器,javascript,jquery,ajax,asp.net-web-api,Javascript,Jquery,Ajax,Asp.net Web Api,我看到过与下面类似的帖子，我自己也做了类似的（但略有不同）。我尝试在这里包含所有信息，同时尽可能简单我开始使用WebAPIversion1，现在正在研究具有内置Cors支持的版本2，我认为这很好（因为我以前在Cors方面遇到过麻烦）在Dev studio 2013中，我创建了一个股票MVC Web Api项目，并在WebApiConfig.Register中包含以下行 public static class WebApiConfig { public static void Regist

我看到过与下面类似的帖子，我自己也做了类似的（但略有不同）。我尝试在这里包含所有信息，同时尽可能简单

我开始使用WebAPIversion1，现在正在研究具有内置Cors支持的版本2，我认为这很好（因为我以前在Cors方面遇到过麻烦）

在Dev studio 2013中，我创建了一个股票MVC Web Api项目，并在WebApiConfig.Register中包含以下行

public static class WebApiConfig
{
  public static void Register(HttpConfiguration config)
  {
    config.EnableCors(new EnableCorsAttribute("*", "*", "*"));    
    ...

为了测试，我用以下脚本创建了一个简单的HTML客户端

$(document).ready(function() {
    $.support.cors = true;

    $.ajaxSetup({
      cache: false
    });

....

function postdata() {

  var data = {
        s1: 'test',
        s2: 'test2'
      };

  $.ajax({
   url: url,
   data: data,
   type: "POST",                                    
   datatype: 'application/json'})   
     ....

我在运行Web API服务的同一台机器上测试了这个脚本，它运行得很好。。在服务器方法中命中了断点，并调用了成功调用

然后我想在我们网络的另一台机器上测试这一点（事实上，它与我运行服务器的机器插在同一个交换机上）

我使用tcping来确保我可以访问运行webapi服务的服务器上的端口（我可以）

在另一台机器上运行时，我现在在Chrome控制台中出现以下错误（我刚刚删除了我的ip和路由）

XMLHttpRequest无法加载http://:62594/。
请求的资源上不存在“Access Control Allow Origin”标头。
因此，不允许访问源“null”。

在fiddler原始视图（在客户机上）中，我看到以下请求

POST http://<serverip>:62594/<my route> HTTP/1.1
Host: <serverpp>:62594
Connection: keep-alive
Content-Length: 68
Accept: */*
Origin: null
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)     Chrome/33.0.1750.154 Safari/537.36
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-GB,en-US;q=0.8,en;q=0.6

s1=test&s2=test2

POST http://:62594/http/1.1
主机：：62594
连接：保持活力
内容长度：68
接受：*/*
来源：空
用户代理：Mozilla/5.0（Windows NT 6.1；WOW64）AppleWebKit/537.36（KHTML，如Gecko）Chrome/33.0.1750.154 Safari/537.36
内容类型：application/x-www-form-urlencoded；字符集=UTF-8
接受编码：gzip、deflate、sdch
接受语言：英语GB，英语US；q=0.8，en；q=0.6
s1=测试，s2=测试2

以及以下回应

HTTP/1.1 400 Bad Request
Content-Type: text/html; charset=us-ascii
Server: Microsoft-HTTPAPI/2.0
Date: Mon, 17 Mar 2014 03:55:55 GMT
Connection: close
Content-Length: 334

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<HTML><HEAD><TITLE>Bad Request</TITLE>
<META HTTP-EQUIV="Content-Type" Content="text/html; charset=us-ascii"></HEAD>
<BODY><h2>Bad Request - Invalid Hostname</h2>
<hr><p>HTTP Error 400. The request hostname is invalid.</p>
</BODY></HTML>

HTTP/1.1400错误请求
内容类型：text/html；字符集=美国ascii码
服务器：Microsoft HTTPAPI/2.0
日期：2014年3月17日星期一03:55:55 GMT
连接：关闭
内容长度：334
错误的请求
错误的请求-无效的主机名
HTTP错误400。请求主机名无效

在服务器机器上，我在fiddler中看不到任何东西，当然，我的api方法没有被调用

我在ajax调用的标题中添加了以下内容

 $.ajax({
        url: url,
        data: data,
        type: "POST",               
        headers: { 'Access-Control-Allow-Origin' : '*',
                   'Origin' : <my client ip>},          
        datatype: 'application/json'})

$.ajax({
url:url，
数据：数据，
类型：“POST”，
标头：{“访问控制允许源”：“*”，
“来源”：}，
数据类型：'application/json'}）

现在Chrome控制台显示

 Refused to set unsafe header "Origin" jquery-2.0.2.min.js:6
 OPTIONS http://<serverip>:62594/<my route> 400 (Bad Request) jquery- 2.0.2.min.js:6
 OPTIONS http://<serverip>:62594/<my route> No 'Access-Control-Allow-    Origin' header is present on the requested resource. Origin 'null' is therefore not allowed  access. jquery-2.0.2.min.js:6
XMLHttpRequest cannot load http://<my server ip>:62594/<my route>. No   'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

拒绝设置不安全的标题“Origin”jquery-2.0.2.min.js:6
选项http://:62594/400（错误请求）jquery-2.0.2.min.js:6
选项http://:62594/请求的资源上不存在“访问控制允许-源”标头。因此，不允许访问源“null”。jquery-2.0.2.min.js:6
XMLHttpRequest无法加载http://:62594/。请求的资源上不存在“Access Control Allow Origin”标头。因此，不允许访问源“null”。

在客户端fiddler中，我看到以下请求

OPTIONS http://<my server ip>:62594/<my route> HTTP/1.1
Host: <my server ip>:62594
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: null
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)     Chrome/33.0.1750.154 Safari/537.36
Access-Control-Request-Headers: access-control-allow-origin, accept, content-type
Accept: */*
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-GB,en-US;q=0.8,en;q=0.6

选项http://:62594/http/1.1
主机：：62594
连接：保持活力
访问控制请求方法：POST
来源：空
用户代理：Mozilla/5.0（Windows NT 6.1；WOW64）AppleWebKit/537.36（KHTML，如Gecko）Chrome/33.0.1750.154 Safari/537.36
访问控制请求标头：访问控制允许来源、接受、内容类型
接受：*/*
接受编码：gzip、deflate、sdch
接受语言：英语GB，英语US；q=0.8，en；q=0.6

在响应中执行以下操作

HTTP/1.1 400 Bad Request
Content-Type: text/html; charset=us-ascii
Server: Microsoft-HTTPAPI/2.0
Date: Mon, 17 Mar 2014 05:47:12 GMT
Connection: close
Content-Length: 334

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML  4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<HTML><HEAD><TITLE>Bad Request</TITLE>
<META HTTP-EQUIV="Content-Type" Content="text/html; charset=us-ascii"></HEAD>
<BODY><h2>Bad Request - Invalid Hostname</h2>
<hr><p>HTTP Error 400. The request hostname is invalid.</p>
</BODY></HTML>

HTTP/1.1400错误请求
内容类型：text/html；字符集=美国ascii码
服务器：Microsoft HTTPAPI/2.0
日期：2014年3月17日星期一05:47:12 GMT
连接：关闭
内容长度：334
错误的请求
错误的请求-无效的主机名
HTTP错误400。请求主机名无效

我不知道为什么在fiddler中它会报告错误的主机名，当我试图设置源代码（它抱怨）时，它不会让我（因此它仍然为空）

有人知道我如何使用jquery打这样的电话吗？如果可能的话，我需要使用什么语法（一个精确的示例调用会很好），或者是否需要设置其他浏览器设置

如有任何信息，我们将不胜感激

提前谢谢你，Peter

正当我在寻找更多信息添加时（比如我在dev studio中运行我的服务器），我发现了我的问题

我注意到我是在iisexpress下运行的，因此（不太了解iisexpress与IIS的区别），我将服务器更改为本地IIS，在那里它创建了一个http:///WebApiTestRoutes

然后，我在我的路线中使用了以下内容：

http://<serverip>/WebApiTestRoutes/<my route>

现在远程机器上一切正常

我把这篇文章放在这里，以防其他人在测试时没有想到同样的事情（iisexpress vs iislocal），对于一个新手来说，这让我困惑了好几天

http://<serverip>/WebApiTestRoutes/<my route>

$.ajax({
        url: url,
        data: data,
        type: "POST",                               
        datatype: 'application/json'})