要求されたリソースに 'Access-Control-Allow-Origin'ヘッダーが存在しません。 Origin 'http://xxxxx.azurewebsites.net'はアクセスが許可されていません

Question

Azure WebアプリケーションがAzure Web APIリソースを要求しているときに、要求されたリソースエラーに「Access-Control-Allow-Origin」ヘッダーが存在しませんローカルでは正常に動作していますが、Azure Webサイトにアクセスしているときに上記のエラーが発生します。以下

コードである：JS

角度サービス：

function industrysearchservice(appConfig, $q) { 

var dsIndustry; 
var schemaIndustry = { 
    data: function (response) { 
     return response.value; 
    }, 
    total: function (response) { 
     return response['@odata.count']; 
    }, 
    model: { 
     id: "Industry" 
    } 
}; 

getIndustries = function (filter) { 

    var deferred = $q.defer(); 

    var dsFetch = new kendo.data.DataSource({ 
     batch: false, 
     schema: schemaIndustry, 
     type: "odata-v4", 
     serverFiltering: true, 
     serverSorting: true, 
     serverPaging: true, 
     pageSize: 20, 

     transport: { 
      read: { 
       url: appConfig.odataUri + "/PSellerIndustryFilter", 
       dataType: "json", 
       data: { 
        $select: "Industry" 
       } 
      } 
     } 
    }); 

    if (!angular.isUndefined(filter)) 
     dsFetch._filter = filter; 


    dsFetch.fetch().then(function() { 
     dsIndustry = dsFetch; 
     deferred.resolve(dsIndustry); 

    }); 

    return deferred.promise; 
} 

return { getIndustries: getIndustries }; 

}

コントローラ方法：

public class PSellerIndustryFilterController : ODataController 
    { 
    PSellerContext db = new PSellerContext(); 

    private bool PSellerIndustryExists(System.Guid key) 
    { 
     return db.PSellerIndustryFilters.Any(p => p.Industry == key.ToString()); 
    } 
    protected override void Dispose(bool disposing) 
    { 
     db.Dispose(); 
     base.Dispose(disposing); 
    } 

    [EnableQuery] 
    public IQueryable<PSellerIndustryFilter> Get() 
    { 
     return db.PSellerIndustryFilters; 
    } 

    [EnableQuery] 
    public SingleResult<PSellerIndustryFilter> Get([FromODataUri] System.Guid key) 
    { 
     IQueryable<PSellerIndustryFilter> result = db.PSellerIndustryFilters.Where(p => p.Industry == key.ToString()); 
     return SingleResult.Create(result); 
    } 
} 

enter image description here

Answer 1

あなたは理由CORSのリクエストにヘッダを追加する必要があります

transport: { 
    read: { 
     url: appConfig.odataUri + "/PSellerIndustryFilter", 
     dataType: "json", 
     data: { 
      $select: "Industry" 
     } 
     headers: { 
      'Content-Type': 'application/x-www-form-urlencoded' 
     } 
    } 
} 

Answer 2

私は以前、この問題がありました。両方の場所で紺色の上書きを設定すると、少なくともであるがCODEまたは紺野ポータル（または自動配置用のARMテンプレート）経由で有効になります。私は青空のポータルから始めることをお勧めします。

リソースグループの下のWebアプリケーションに移動し、CORSの設定を検索してから>*またはそこに許可したい特定の起点を追加します。これが動作すれば。

注：ウェブアプリ

をごODATA APIサイトへのポータルを経由して設定CORSを追加することを確認していない経由ポータル https://docs.microsoft.com/en-us/azure/app-service-api/app-service-api-cors-consume-javascript

を介してアーム https://github.com/azure-samples/app-service-api-dotnet-todo-list/blob/master/azuredeploy.json

コード WebApiConfig.cs

config.EnableCors(); 

PSellerIndustryFilterController.cs

[EnableCors(origins: "http://Yoururl.azurewebsites.net", headers: "*", methods: "*")] 
public class PSellerIndustryFilterController : ODataController 
{ 
    //details 
}