javascript - Azure 移动服务 invokeAPI 调用出现控制台错误

Question

我正在将我的 Angular 应用程序与 Azure 服务后端集成。

我最初只是使用标准的 $http 调用，如下所示:

   $http({
      method: 'POST',
      url: "https://services.example.com/Api/myApi",
      headers : {
        "Content-Type": "application/json",
        "Ocp-Apim-Subscription-Key": "my-key"
      },
      data : post,
      success : function(data,status) {
        console.log(data + "  " + status);
      },
      failure : function(err) {
          console.log(err)
      }

但这奇怪地返回了 200 响应，但却抛出了请求的资源上不存在“Access-Control-Allow-Origin” header 的错误。后端开发人员向我保证 CORS 是开放的，所以迷失了方向。

然后尝试与 https://github.com/TerryMooreII/angular-azure-mobile-service 集成。集成是有意义的，调用如下所示:

Azureservice.invokeApi('myApi', {
          method: 'post',
          body: {
             data: 'Cheese'
          },
          headers : {
             'Content-Type' : 'application/json'
          }
      })
      .then(function(response) {
          console.log('Here is my response object');
          console.log(response)
      }, function(err) {
          //console.error('Azure Error: ' + err);
      });

我收到了无法描述的错误:选项 https://services.example.com/api/myApi MobileServices.Web-1.1.2.min.js:2

t.DirectAjaxTransport.t.performRequest @ MobileServices.Web-1.1.2.min.js:2t.Platform.t.webRequest @ MobileServices.Web-1.1.2.min.js:2t.MobileServiceClient.MobileServiceClient._request @ MobileServices.Web-1.1.2.min.js:2(匿名函数) @ MobileServices.Web-1.1.2.min.js:2t.Platform.t.async @ MobileServices.Web-1.1.2.min.js :2Promise @ MobileServices.Web-1.1.2.min.js:2t.Platform.t.async @ MobileServices.Web-1.1.2.min.js:2invokeApi @ angular-azure-mobile-service.min.js:1 $scope.submit @ form.js:30$a.functionCall @ Angular.js:10567(匿名函数) @ Angular.js:18627$get.h.$eval @ Angular.js:12412$get.h.$apply @ Angular.js:12510(匿名函数) @ Angular.js:18626n.event.dispatch @ jquery.js:4435n.event.add.r.handle @ jquery.js:4121

再次加上 Access-Control-Allow-Origin header 错误，返回 404!

有什么想法吗？

Answer 1

第一个问题:您正在通过 Angular js 代码进行跨域请求。因此，您必须在 Azure 移动服务设置中允许您的 Angular 站点。转到移动服务仪表板 > 配置 > 应用设置 > 创 build 置“MS_CrossDomainOrigins”，值应为“http://[yoursitename] ”。您可以允许像这样的多个站点“http://[site1],http://[site2] ”，但是您的 ajax 调用看起来不像是在调用移动服务，即使标签表明您正在询问移动服务。无论如何，您应该使用像 Chrome 检查器这样的浏览器调试器，并检查响应是否具有 header “Access-Control-Allow-Origin”。如果没有，您需要返回后端开发人员。 (微软记录的通过 webapiconfig 允许 COR 的方法在我发布时对我不起作用，所以也许他也在做同样的事情。它只在我调试时有效。)

第二个问题:我认为你确实需要首先弄清楚 COR 问题。一次一个。