Question

这可能是一个愚蠢的问题，但这是我简单的webapi 2方法

public class ProductsController : ApiController
    {
        Product[] products = new Product[] 
        { 
            new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 }, 
            new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M }, 
            new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M } 
        };

        public IEnumerable<Product> GetAllProducts()
        {
            return products;
        }

现在，如果我运行它，在我的电脑上运行它http://localhost:3145/Products，我可以看到产品为XML

它也可以使用soapui

enter image description here

但是现在如果我尝试使用html文件和这个javascript

来访问它

      <script type="text/javascript">
            function GetProducts() {


                $.ajax({
                    url: "http://localhost:3145/Products",
                    dataType: "json",
                    success: function (data) {
                        for (var i = 0; i < data.length; i++)
                            $('#myDiv').append(data[i].Category).append("<br/>");
                    },
                    error: function (xhr, status) {
                        alert(xhr);
                    }
                });
            }

        </script>
    </head>
<body onload="GetProducts()">
    <h1>My App</h1>
    <div id="myDiv"></div>

我收到了CORS错误

enter image description here

如果SOAP UI在使用http时也没有出现错误？

由于

Answer 1

将该索引文件放入某个服务器位置，然后浏览包含服务器URL的页面，例如http://localhost/virtual_dir/index.html，否则会说file:///域与http://localhost:port不匹配。如果您将此页面部署到其他域并开始使用，则可能会遇到CORS issue。

我已经看到你正在使用webapi，如果你把JS放在域名（“example1.com”）中你可能会遇到CORS问题，我的意思是从example1.com提供的文件将有ajax调用webapi并且可以在example2.com中托管webapi。这将引发CORS问题。浏览器限制对其他域的ajax调用，除非该域允许您调用。要实现这一目标，您可以点击此链接 - Angular.js $resource with ASP.Net webapi?（不要通过标题）

我在那里回答了同样的情况。

Answer 2

我刚刚遇到了与我正在开发的网页相同的情况，该网页需要将SOAP请求发送到由未启用CORS的远程服务器提供服务的Web服务。这是在测试环境中;在生产中，网页和Web服务是从同一个域和端口提供的。

如果SOAP UI在使用http时也没有出现错误？

是的，SoapUI和网络浏览器都使用HTTP。但SoapUI不是一个Web浏览器，并没有共享相同的限制。

一位同事指着我CORS Anywhere解决了这个问题。

安装Node.js，如果您还没有。
安装CORS Anywhere（npm install cors-anywhere）。
在任何地方运行CORS（node cors-anywhere.js）。
不使用原始的非CORS启用的Web服务URL，而是使用CORS Anywhere生成的消息中的域和端口（＆＃34;运行CORS Anywhere on ...＆＃34;），将原始Web服务URL作为路径组件。

您可以在环境变量中指定CORS Anywhere端口（或编辑cors-anywhere.js的本地副本中的默认值。）

在我的例子中，生产Web服务URL在网页中被硬编码为相对路径。但我添加了从片段标识符（＆＃34;哈希字符串＆＃34;）中的参数读取URL的代码，覆盖了默认的Web服务URL。

例如：

http://localhost:8081/mywebpage.html#url=http://localhost:8089/remote.domain.com:8085/servicename

其中：

http://localhost:8081/mywebpage.html是我的网页（我使用的是http://，而不是file://。
http://localhost:8089是CORS Anywhere代理。
remote.domain.com:8085/servicename（您可以删除前导http://）是远程的，未启用CORS的Web服务。

Answer 3

我可以为您指出2个解决方案：

禁用浏览器的CORS：：由于CORS强制由浏览器完成，因此您可以在自己的浏览器中进行开发时禁用此功能。如果您使用的是Chrome，则只能设置一个参数，否则我可能会猜测正在使用Firefox的下面图像，为此，您需要执行以下操作的扩展名：https://addons.mozilla.org/pt-PT/firefox/addon/cors-everywhere/
允许在SOAP UI中使用CORS ：与上述解决方案相比，它可能需要花费更多的精力，但是当您需要与多个队友共享或者只是将解决方案附加到模拟游戏时，它非常适合服务。为此，您必须为资源路径的根添加一个响应，以响应OPTIONS并具有状态204（或200）的CORS所需的标头。之后，在MockService中，您只需要添加一个脚本即可在通过的所有调用中获取这些相同的标头。

以下是解决此问题的文章：逐步： https://medium.com/@andrelimamail/how-to-deal-with-cors-in-soap-ui-mock-services-or-anyother-f4cc55b3dccd

当我的ajax调用无法执行时，SoapUI如何绕过CORS问题？

3 个答案: